Mouseup nie działa po mousemove on img

Question

Próbuję wykonać prosty skrypt przeciągania. Chodzi o to, aby zapisać pozycję, gdy mysz nie działa, zaktualizować widok, gdy mysz się porusza, i zatrzymać, gdy mysz jest w górze. Problem, zdarzenie mouseup nie działa poprawnie.

Patrz kod:

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

Dlaczego mouseUp współpracuje z "a" tagu: http://jsfiddle.net/leyou/c3TrG/1/

I dlaczego mouseUp nie działa z "img" tag: http://jsfiddle.net/leyou/eNwzv/

Po prostu spróbuj przeciągnąć je w poziomie.

Ten sam problem na ie9, ff i chrome. Windows7

Answer 1

Wystarczy dodać e.preventDefault() do obsługi MouseDown, tak:

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

Zobacz pracuje demo.

Uzasadnieniem jest to, że przeglądarka również wykonała własny natywny obraz przeciągnij i upuść (np. Przeciągnij obraz i upuść go w aplikacji spoza przeglądarki), więc musisz anulować domyślne przeciąganie i upuszczanie za pomocą .preventDefault().