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/

Answer 2

添加

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

在Javascript的顶部，这会截取并阻止浏览器中的默认拖动行为，同时允许您稍后覆盖它以满足您的需要。默认情况下会阻止您在Firefox中拖动时看到的默认图像重影的净效果。

FIDDLE

css：拖动图像在Firefox中不起作用

2 个答案: