Mooeup funktioniert nicht nach Mausklick auf img

Question

Ich versuche ein einfaches Drag-Skript zu machen. Die Idee ist, die Position zu speichern, wenn die Maus nicht bewegt wird, die Ansicht zu aktualisieren, während sich die Maus bewegt, und zu stoppen, wenn die Maus hoch ist. Problem, mouseup-Ereignis funktioniert nicht richtig.

Siehe Code:

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

Warum mouseup mit einem "a" Tag funktioniert: http://jsfiddle.net/leyou/eNwzv/

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

Und warum mouseup mit einem "img" Tag funktioniert nicht

Versuchen Sie einfach, sie horizontal zu ziehen.

Gleiches Problem auf ie9, ff und Chrom. Windows7

Answer 1

Fügen Sie einfach e.preventDefault() zu Ihrem mousedown- Handler, wie folgt aus:

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

Siehe demo arbeiten.

Der Grund ist, dass der Browser auch sein eigenes natives Bild Drag & Drop (wie ein Bild ziehen und es in eine Anwendung außerhalb des Browsers) tun, so müssen Sie diese Standard-Drag & Drop mit .preventDefault() abbrechen.