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

Posted 2023-03-06

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

【英文标题】：HTML5 draggable image "selecting" and screwing up my drag javascript in firefox

【发布时间】：2016-02-29 10:05:18

【问题描述】：

我正在尝试在不诉诸画布解决方案的情况下使图像可拖动（我有很多其他 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 中拖动时播放得很好？

【问题讨论】：

我不知道为什么，但是这个小提琴在 firefox v42 中对我有用...

从技术上讲，它“有效”，但它有问题。尝试疯狂地点击拖动几秒钟，你就会明白我的意思了。

【参考方案1】：

我记得很久以前就到处找这个了。 这实际上是一个相当老的修复程序，但我已经在你的小提琴上试过了，似乎可以工作。

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

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

if 的原因是为了避免在旧版本的 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/

【讨论】：

感谢您的 javascript；效果很好。 .noselect css 本身不会这样做。

嗯，当我尝试它工作时，您是否在所有项上应用了class="noselect"？我发布的小提琴有它，在 Firefox 上它没有选择东西。

是的，尝试你的小提琴只是删除onmousedown 并且在Linux FF41（我知道当前版本是42）中单击和拖动时会出现问题。

哦，user-select 仅用于防止文本选择和蓝色覆盖的发生（您在问题中提到了这一点）。如果您不需要它，请随意删除它（它会阻止用户复制文本）

【参考方案2】：

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

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

【参考方案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/