为啥 HTML5 拖放功能在 Firefox 中不起作用？

Posted 2023-05-08

【中文标题】为啥 HTML5 拖放功能在 Firefox 中不起作用？

【英文标题】：Why doesn't HTML5 drag and drop work in Firefox?为什么 HTML5 拖放功能在 Firefox 中不起作用？

【发布时间】：2013-10-04 00:24:14

【问题描述】：

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

【问题讨论】：

请提供示例代码和火狐版本？

它应该同时发布答案但它没有......不知道为什么。

【参考方案1】：

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

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

在 drop 事件中确保调用：

event.preventDefault();

或者它会跳转到anything.com。

【讨论】：

使用event.dataTransfer.setData('text/html', 'anything') 它不会跳转到anything.com

对于其他在 FF 上与拖放作斗争的人，这可能也与您有关，尽管与此特定问题无关：***.com/questions/11656061/…

另外，您需要特别确保在放置事件处理程序上调用 preventDefault() 以防止它尝试导航。不知道 Mozilla 在做这个糟糕的实现时在想什么。

【参考方案2】：

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

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

function dragstartHandler(event)

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

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

【讨论】：

如果您希望它在 IE 中工作，请使用 'text' 而不是 'text/plain'。见***.com/questions/12803235/…

这行得通，但截至今天，MDN Drag 文档仍然说 DragEvent 具有 dataTransfer 属性。没有提到必须引用 originalEvent。

@LexLindsey，originalEvent 是针对 jQuery 的，如答案中所示。

所以这是 Firefox 中的一个错误，它迫使您在拖动启动事件上设置数据。

它适用于我的 React by event.nativeEvent.dataTransfer.setData('text', 'anything') in onDragStart prop.

【参考方案3】：

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

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

这是设置

-moz-user-select: none

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

【参考方案4】：

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

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

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

    //your code here

    return false;

我从this link得到了这个解决方案。

【参考方案5】：

使用这个

IE：

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

火狐：

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

【讨论】：

这使我可以使用 dragend 事件，但 drag 事件仍然无法在 firefox 上运行。