javascript - 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 中你可以选择图像，然后它就不再起作用了。关于如何在 FF 中解决这个问题有什么建议吗？

Answer 1

您需要在 mousedown 处理程序中返回 false 以防止默认浏览器行为:

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

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