※ ChatGPTを利用し、要約された質問です（原文：ｊQuery。セレクタに変数を使えないケース？）
jQueryセレクタに変数を使えないケース
このQ&Aのポイント
JavaScript初心者がjQueryのセレクタで変数を使用する際に問題が発生しています。
変数を使用すると動作しないため、直接id名を指定すると正常に動作します。
jQueryの解説サイトでも、セレクタに変数を使用することは可能と記載されていますが、実際にはうまく機能しないようです。
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のセレクタで変数が無効なケースとは何かを知りたくなってしまったので、これはこれとして教えていただければ幸いです。
お礼
常にmouseのmoveが監視されているものと思っていましたが、 最初に設定されるだけとは大違いですね。 動作の実際を教わるまでずっと悩んでいるところでした。 ご提案のように直したところ、成功しました。 ありがとうございます。