ｊQueryでシンプルドラッグドロップがまずい
Javascript,jQuery初心者です。主にWINDOWS7、GoogleChrome使用です。
ｊQueryでシンプルなドラッグドロップ自作をやってみました。
<!DOCTYPE html>
<html>
<head>
<meta carset="utf-8">
<script src="js/jquery-1.11.0.min.js"></script>
<style>
#chr{ position:absolute; left:100px; top:100px; }
</style>
<body>
<div id="msg"></div>
<div id="chr">
<img src="parts/usl470.jpg">
</div>
<script>
dragflg=false;
$("#chr").mousedown(function(){ dragflg=true; $("#msg").html("on")})
.mouseup(function(){ dragflg=false; $("#msg").html("up")});
$(window).mousemove(function(e){
if(dragflg)
{ $("#chr").css("left",e.clientX-20+"px")
.css("top",e.clientY-20+"px");
} });
</script>
</body>
</head>
</html>
mousedown、mouseupの検出を確認するために、隅にon、upと表示するようにしてあります。
思惑通り、押すとon、離すとupが表示されますが、ドラッグドロップした後は、離している状態のupになってくれず、押さずに動かしても#chrはついてきてしまいます。まともなドラッグドロップと違い、もう１回クリックでやっと離してくれる、という具合です。
#chr上でボタンを離している時はそれを検出するんじゃないのか？と思ってしまうのですが、ついでに、ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、詳しい人はどうやってこういう症状を回避してドラッグドロップの動作を実現しているのでしょうか？
ネットで見て回って参考にしようにも、短くてシンプルなjQueryのドラッグドロップのサンプルが見つからず、ここで何が間違いなのか意見を仰ごうと思ったものです。手っ取り早くｊQueryUIを導入すれば、やりたいこと自体は出来るんでしょうけど、ボタン離していても検出できないのが何なのかは、すっきりしておきたいと思いました。どうかよろしくお願いします。
お礼
HIRSYUさん 無事動かすことができました。 ありがとうございます。