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

【问题标题】：css: dragging image doesn't work in Firefoxcss：拖动图像在 Firefox 中不起作用
【发布时间】：2013-12-30 18:21:55
【问题描述】：

当用户单击图像并开始移动时，我正在尝试移动图像：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 中解决这个问题吗？

【问题讨论】：

你应该为mouseout添加一个处理程序。

标签： javascript html css firefox

【解决方案1】：

添加

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

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

FIDDLE

【讨论】：

【解决方案2】：

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

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

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

【讨论】：