CSS：拖動圖像在Firefox

Question

不起作用

我想，當用戶點擊圖片左右移動的圖像，並開始移動：DEMO 它工作在Chrome，但在FF奇怪的行爲

HTML ：

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

我處理的JavaScript如下

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

（在我自己的代碼我確實有點多，因爲你不能移動某些邊界外的圖像）

我不知道爲什麼，但在Firefox中，你可以選擇圖像，然後它doesn」工作了。任何建議如何解決這個FF？

Answer 1

您需要在您的mousedown處理程序返回false，以防止默認瀏覽器的行爲：

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

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

Answer 2

添加

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

給JavaScript的頂部，這個攔截和阻止默認拖曳行爲在瀏覽器中，同時允許您以後重寫，以滿足您的需求。默認情況下，禁止在Firefox中拖動時看到的默認圖像重影的淨效果。

FIDDLE