8

簡単なドラッグスクリプトを実行しようとしています。アイデアは、マウスが下がっているときに位置を保存し、マウスが動いている間にビューを更新し、マウスが上にあるときに停止することです。問題、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が「a」タグで機能する理由：http： //jsfiddle.net/leyou/c3TrG/1/

そして、なぜmouseupが「img」タグで機能しないのか：http： //jsfiddle.net/leyou/eNwzv/

それらを水平方向にドラッグしてみてください。

ie9、ff、およびchromeでも同じ問題が発生します。Windows7

4

1 に答える 1

27

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);
    }
})

作業デモを参照してください。

修正の理由は、ブラウザが独自のネイティブ画像のドラッグアンドドロップも実行していたため（たとえば、ブラウザから画像をドラッグして外部アプリケーションにドロップする場合など）、そのデフォルトをキャンセルする必要があるということです。ネイティブのドラッグアンドドロップ.preventDefault()。

于 2012-11-05T16:58:59.223 に答える