css: trascinare l'immagine non funziona in Firefox

Question

Sto cercando di spostare un'immagine intorno quando l'utente fa clic sull'immagine e inizia a muoversi: DEMO Funziona in Chrome, ma ha lo strano comportamento in FF

HTML :

<div id="parent"> 
    <img .... > 
</div> 

E mi occupo del javascript come segue

JS:

var move = false, prevX; 
$('img').on('mousedown', function(e) { 
    move = true; 
    prevX = e.pageX; 
}) 
    .on('mousemove', function(e) { 
     if (move === true) { 
      var x = parseInt($(this).css('left')) + e.pageX - prevX; 
      $(this).css('left', x); 
      prevX = e.pageX; 
     } 
}) 
    .on('mouseup', function(e) { 
     move = false; 
}); 

(Nel mio codice personale faccio un altro po 'perché non ti è permesso spostare l'immagine al di fuori di certi limiti)

Non so perché, ma in Firefox puoi selezionare l'immagine e poi non lo fa lavoro più. Qualche suggerimento su come risolvere questo problema in FF?

Answer 1

è necessario restituire falso nel vostro mousedown gestore per prevenire comportamenti browser predefinito:

$('img').on('mousedown', function(e) { 
    move = true; 
    prevX = e.pageX; 
    return false; 
}) 

http://jsfiddle.net/7Lhf3/5/

Answer 2

Aggiungi

$(document).on("dragstart", function() { 
    return false; 
}); 

Per la parte superiore del vostro JavaScript, questo intercetta e impedisce il comportamento di trascinamento predefinito nel browser, consentendo nel contempo di ignorare in un secondo momento in base alle proprie esigenze. Per impostazione predefinita, l'effetto netto è il ghost dell'immagine predefinita che viene visualizzato durante il trascinamento in Firefox.

FIDDLE