Mouseup non funziona dopo mousemove su img

Question

Sto provando a fare un semplice script di trascinamento. L'idea è di salvare la posizione quando il mouse è inattivo, aggiornare la vista mentre il mouse è in movimento e fermarsi quando il mouse è in alto. Problema, l'evento mouseup non funziona correttamente.

vedere il codice:

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

Perché mouseup funziona con una "a" tag: http://jsfiddle.net/leyou/c3TrG/1/

E perché mouseup non funziona con un tag "img": http://jsfiddle.net/leyou/eNwzv/

Basta provare a trascinarli orizzontalmente.

Same probleme su ie9, ff e chrome. Windows7

Answer 1

Basta aggiungere e.preventDefault() al gestore MouseDown, in questo modo:

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

vedere Operazioni demo.

Il razionale è che il browser stava anche eseguendo il trascinamento della propria immagine nativa (come trascinare un'immagine e rilasciarla in un'applicazione esterna al browser), quindi è necessario annullare tale trascinamento predefinito con .preventDefault().