HTML5可拖动图像”;选择“;在firefox中搞砸了我的拖拽javascript

Question

我试图在不使用画布解决方案的情况下使图像可拖动（我有很多其他DOM元素需要进行可视化）。我在这里有一个fiddle演示，它在Chromium中运行得很好，但在Firefox中运行不好（我稍后会讨论其他浏览器）。

在Firefox中，图像往往会被"选中"，HTML5的可拖动功能似乎会被调用。这意味着图像往往会被拖动，而容器div不会随之移动，并且图像也会被选中，从而导致难看的蓝色覆盖。我试着用下面的代码修复它，但没有成功（是的，我知道z索引技巧不应该奏效，但我抓住了救命稻草）：

HTML

<div id="div1">
    <img id="pic1" draggable="false">
</div>

CSS

#div1 { z-index: 2;}
#pic1 {
    z-index: 1;
    user-drag: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
}

如何在Firefox中拖动时使图像播放良好？

Answer 1

我记得很久以前我四处寻找过这个。事实上，这是一个相当古老的修复方法，但我在你的小提琴上试过，似乎有效。

这里的技巧是添加一个事件处理程序，防止其他处理程序在您单击鼠标时执行，如下所示：

onmousedown="if (event.preventDefault) event.preventDefault()"

if的原因是为了避免旧版本的IE出现错误，因为旧版本没有该功能。请注意，这可能会导致mousedown上的其他事件不触发。

最后，如果您想防止选择发生，最好的选择是user-selectCss属性。

正如MDN页面所说，这是一个非标准功能，因此请确保对其进行测试，您可以创建一个css类，如：

.noselect {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

并将其用于您想要的项目。

你可以在这个更新的fiddle中看到这两个功能：https://jsfiddle.net/us6t8uvd/10/

Answer 2

轰！刚刚有了一个想法并进行了测试。在FF:工作

#div1 {
    width: 200px;
    height: 200px;
    background-image: url('http://placehold.it/200x200?text=draggable+image');
}

Answer 3

使用Event.preventDefault将阻止事件上发生任何默认行为，让您完全控制它。

我把它放在每个事件函数中如下：

_on(el, 'mousedown', function (e) {
    e.preventDefault();
...
_on(document, 'mouseup', function (e) {
    e.preventDefault();
...
_on(document, 'mousemove', function (e) {
    e.preventDefault();
...

工作JS Fiddle

http://jsfiddle.net/us6t8uvd/9/