為什么 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', '');