ｊQueryでシンプルドラッグドロップがまずい

解決済

質問者：zchess
質問日時：2014/03/13 21:38
回答数：1件

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を導入すれば、やりたいこと自体は出来るんでしょうけど、ボタン離していても検出できないのが何なのかは、すっきりしておきたいと思いました。どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2014/03/14 12:30

この手のことをやったことはありませんが、興味があったので試してみました。

スクリプトとは関係なしに、ブラウザ側の機能として表示中の要素をドラッグしようとすると移動禁止マークが出るように、ドラッグに対しての反応が組み込まれているようです。

＞ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、～
上記のブラウザ側の処理が働いていると想像します。
これをキャンセルしておかないとドラッグ＆ドロップの制御はうまくいかないようですね。キャンセルするには、イベントの伝搬を止めておけばよさそうです。

というわけで、こんな感じ？
（クリックした位置が変わらないように、少しロジックを変えています）

（全角空白は半角に）
<!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 …
<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>

参考URL：http://api.jquery.com/event.preventDefault/

- 0
- 件

通報する

この回答へのお礼

犯人は、ブラウザのデフォルト動作だったんですか。

それにしても、すごい！！
クリックした位置まで変わらないようにしてるのに、こんなに短く実現できるんですね。
デフォルトの動作を抑止するevent.preventDefaultの使い方といい、
恥ずかしながら、知らない技法がいっぱいです。
シンプルなのに学ぶことの多いお手本です。ありがとうございました。

通報する

お礼日時：2014/03/14 19:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！