- ベストアンサー
ｊQueryでシンプルなドラッグドロップがまずい
- ｊQueryでシンプルなドラッグドロップ自作をやってみましたが、うまくいきません。
- ドラッグドロップした後は、離している状態のupにならず、押さずに動かしても要素がついてきます。
- 短くてシンプルなjQueryのドラッグドロップのサンプルが見つからず、どうやって回避する方法が知りたいです。
- zchess
- お礼率92% (86/93)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
この手のことをやったことはありませんが、興味があったので試してみました。 スクリプトとは関係なしに、ブラウザ側の機能として表示中の要素をドラッグしようとすると移動禁止マークが出るように、ドラッグに対しての反応が組み込まれているようです。 ＞ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、～ 上記のブラウザ側の処理が働いていると想像します。 これをキャンセルしておかないとドラッグ＆ドロップの制御はうまくいかないようですね。キャンセルするには、イベントの伝搬を止めておけばよさそうです。 というわけで、こんな感じ？ （クリックした位置が変わらないように、少しロジックを変えています） （全角空白は半角に） <!DOCTYPE html> <html lang="ja"> <head>Sample</head> <style> #chr{ position:absolute; left:100px; top:100px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> (function(){ var drag = { flag:false }; $(document).mousedown(function(e){ if($(e.target).parent().attr("id")!="chr") return; var o = $("#chr").offset(); drag.deff = { x:o.left - e.pageX, y:o.top - e.pageY }; drag.flag = true; e.preventDefault(); }).mousemove(function(e){ if(!drag.flag) return; $("#chr").css({top: e.pageY + drag.deff.y, left: e.pageX + drag.deff.x}); e.preventDefault(); }).mouseup(function(){ drag.flag = false; }); })(); </script> </head> <body> <div id="msg"></div> <div id="chr"> <img src="parts/usl470.jpg"> </div> </body> </html>
お礼
犯人は、ブラウザのデフォルト動作だったんですか。 それにしても、すごい！！ クリックした位置まで変わらないようにしてるのに、こんなに短く実現できるんですね。 デフォルトの動作を抑止するevent.preventDefaultの使い方といい、 恥ずかしながら、知らない技法がいっぱいです。 シンプルなのに学ぶことの多いお手本です。ありがとうございました。