css: przeciąganie obrazu nie działa w Firefoksie

Question

próbuję przesunąć obraz wokół gdy użytkownik kliknie obraz i zacznie się poruszać: DEMO To działa w Chrome, ale ma dziwne zachowanie w FF

HTML :

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

I obsługiwać JavaScript następująco

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

(W moim własnym kodzie robię trochę więcej, ponieważ nie wolno ci przenosić obrazu poza określone granice)

Nie wiem dlaczego, ale w Firefoksie możesz wybrać obraz, a następnie nie robi tego ". t już działają. Wszelkie sugestie, jak to naprawić w FF?

Answer 1

Trzeba return false w swojej obsługi mousedown aby zapobiec zachowanie domyślne przeglądarki:

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

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

Answer 2

Dodaj

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

Do góry JavaScript, twoja przechwytuje i zapobiega domyślne zachowanie przeciągania w przeglądarce, a jednocześnie pozwala go zastąpić później do własnych potrzeb. Efekt sieciowy, który jest domyślnym odwzorowaniem obrazu widocznym podczas przeciągania w przeglądarce Firefox, jest domyślnie wyłączony.

FIDDLE