ｊQuery。セレクタに変数を使えないケース？
Javascript勉強駆け出しの者です。ＷＩＮ7、Chromeを主に使っています。
<!DOCTYPE html>
<html>
<head>
<meta carset="utf-8">
<script src="js/jquery-1.11.0.min.js"></script>
<style>
.chr{ position:absolute; }
</style>
</head>
<body>
<div id="gyoku" class="chr" style="top:60px;left:0;">
<img src="parts/gyoku.png">
</div>
<div id="hisya" class="chr" style="top:120px;left:0;">
<img src="parts/hisya.png">
</div>
<div id="kaku" class="chr" style="top:180px;left:0;">
<img src="parts/kaku.png">
</div>
<script>
var chrid;
dragflg=false;
$(".chr").css("position","absolute")
.mousedown(function()
{ dragflg=true; chrid=$(this).attr('id'); })
.mouseup(function(){ dragflg=false; });
// $("#gyoku").mousemove(function(e){
$("#"+chrid).mousemove(function(e){
if(dragflg)
{ e.preventDefault();
$(this).css("left",e.clientX-20+"px")
.css("top",e.clientY-20+"px");
}
});
</script>
</body>
</html>
一応、シンプルにドラッグドロッププログラムを書くというのを目指したものです。
対象のキャラ（約35×50px）を3つほど用意し、mousedown時に変数chridにid名を読み込み、切り替えてドラッグドロップするという狙いですが、うまくmousemoveがいきません。mousemove行を１行上のコメント行に差し替えて個別にidを直接書けば意図通り動くのに、変数を使用するとダメなようです。ｊQuery解説サイトでも、セレクタに"文字列"+変数という書き方は使える、という説明で、"#gyoku"と chridに"gyoku"を読み込んでいる時の"#"+chrid は同じ意味と認識しているのですが、違うのでしょうか？
どうすればうまく動くのか、どなたかご教示お願いします。
ｊQueryUIを使った方が手っ取り早いというご指摘もあるかと思いますが、この際、ｊQueryのセレクタで変数が無効なケースとは何かを知りたくなってしまったので、これはこれとして教えていただければ幸いです。
お礼
回答ありがとうございました。 ＞$$ という関数を、引数 "div" を与えて呼び出しています ・改めてコードを見直したら、該当する記述がありました ・こんな書き方できるんですね ・大変参考になりましたー