imgのmousemoveの後にマウスアップが動作しない

Question

私は単純なドラッグスクリプトを実行しようとしています。 アイデアは、マウスがダウンしているときの位置を保存し、マウスが動いている間はビューを更新し、マウスがアップしているときは停止することです。問題、mouseupイベントが正しく機能していません。

はコードを参照してください：

var target = $('a') 
var pos = 0; 
var dragging = false; 

$(document).mousedown(function(e) { pos=e.pageX; dragging = true }) 
$(document).mouseup(function() { dragging = false }) 
$(document).mousemove(function(e) { 
    if(dragging){ 
     target.css('left', e.pageX-pos); 
    } 
}) ​ 

なぜ "" タグと連携のmouseup： http://jsfiddle.net/leyou/eNwzv/

： http://jsfiddle.net/leyou/c3TrG/1/

とのmouseupは "IMG" タグでは動作しない理由

横にドラッグしてみてください。

ie9、ff、およびchromeに同じ問題があります。 Windows7の

Answer 1

はちょうどこのように、あなたのマウスダウンハンドラにe.preventDefault()を追加します。

var target = $('img') 
var pos = 0; 
var dragging = false; 

$(document).mousedown(function(e) { e.preventDefault(); pos=e.pageX; dragging = true }) 
$(document).mouseup(function() { dragging = false }) 
$(document).mousemove(function(e) { 
    if(dragging){ 
     target.css('left', e.pageX-pos); 
    } 
}) 

はdemoの作業を参照してください。

ブラウザは、独自のネイティブイメージのドラッグアンドドロップ（イメージをドラッグしてブラウザ外のアプリケーションにドロップするなど）を行っていたため、デフォルトのドラッグアンドドロップをキャンセルする必要があります。.preventDefault()。