Question

我试图在不使用画布解决方案的情况下使图像可拖动（我有很多其他DOM元素，我需要这个可视化）。我有一个小提琴演示here在Chromium中很好用，但在Firefox中却不行（稍后我会转到其他浏览器）。

在Firefox中，图像趋于“选中”，并且似乎正在调用HTML5可拖动功能。这意味着图像往往被拖动而容器div不随其移动，图像也会被选中，从而产生难看的蓝色叠加。我尝试使用下面的代码修复它，但没有成功（是的，我知道z-index技巧不应该工作，但我抓着吸管）：

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

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

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

Answer 2

我记得很久以前就在寻找这个。它实际上是一个非常古老的修复，但我已经尝试过你的小提琴并且似乎正在工作。

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

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

if的原因是为了避免在旧版本的IE上出现错误，因为IE版本不具备该功能。请注意，这可能导致您在mousedown上发生的其他事件无法触发。

最后，如果您想阻止选择发生，最好的选择是user-select css property。

就像MDN页面所说，它是一个非标准功能，所以确保测试，你可以像这样创建一个css类：

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

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

你可以看到这两个工作在这个更新的小提琴：https://jsfiddle.net/us6t8uvd/10/

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小提琴

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

HTML5可拖动图像“选择”并搞砸了我在Firefox中的拖动javascript

3 个答案: