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中你可以选择图像然后它不再起作用了.任何建议如何解决这个问题？

Answer 1

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

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

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