javascript - 为什么 HTML5 拖放功能在 Firefox 中不起作用？

Question

我已将事件绑定到不同的元素，当我在除 Firefox 之外的所有浏览器中拖动它们时，它按预期工作。然而，在 Firefox 中，它根本不起作用。唯一触发的事件是dragstart，其他事件都不会触发。这是怎么回事？

Answer 1

Firefox 要求用户dataTransfer.setData在事件中运行该函数。

对于您jQuery的用户，这意味着以下代码应该可以解决您的问题：

function dragstartHandler(event){

  event.originalEvent.dataTransfer.setData('text/plain', 'anything');

}

现在，同一拖动上的未来事件将按照您的预期正确触发。显然，您可以setData用更有用的数据替换参数。

Answer 2

我没有使用 jQuery，因此删除了该originalEvent部分并将格式更改为文本（或 IE 有问题），它可以工作：

event.dataTransfer.setData('text', 'anything');  

在 drop 事件中确保调用：

event.preventDefault();

或者它会跳转到anything.com。

Answer 3

FF 在吃掉某些鼠标事件方面存在长期问题，这些事件源自将溢出设置为自动或滚动的元素。

就我而言，我有一个使用良好的拖放库，它在示例和我的应用程序中完美运行，除了 Firefox 之外的所有浏览器。在挖掘了与此相关的票后，我找到了一个解决方案，我完全归功于这张票的贡献者

这是设置

-moz-user-select: none

在被拖动的滚动元素上。它解决了我的特殊问题。

Answer 4

您可以将其用作有关 Firefox 上发生的重定向的问题解决方案的参考。

您需要阻止 drop 方法中的默认操作来解决此问题。

function drop(e) {
    if(e.preventDefault) { e.preventDefault(); }
    if(e.stopPropagation) { e.stopPropagation(); }

    //your code here

    return false;
}

我从这个链接得到了这个解决方案。

Answer 5

用这个

IE：

event.dataTransfer.setData('text', '');

火狐：

event.dataTransfer.setData('text/plain', '');