問題描述

考慮一下這個JSFiddle.它在 Firefox (14.0.1) 中運行良好，但在 Windows (7) 和 OS X (10.8) 上的 Chrome (21.0.1180.75)、Safari (?) 和 Opera(12.01?) 中失敗.據我所知，問題在于 dataTransfer 對象上的 setData() 或 getData() 方法.這是來自 JSFiddle 的相關代碼.

Consider this JSFiddle. It works fine in Firefox (14.0.1), but fails in Chrome (21.0.1180.75), Safari (?) and Opera(12.01?) on both Windows (7) and OS X (10.8). As far as I can tell the issue is with either the setData() or getData() methods on the dataTransfer object. Here's the relevant code from the JSFiddle.

var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

var dragEnterHandler = function (e) {
    //  dataTransferValue is a global variable declared higher up.
    //  No, I don't want to hear about why global variables are evil,
    //  that's not my issue.
    dataTransferValue = e.originalEvent.dataTransfer.getData("text/plain");

    console.log(dataTransferValue);
};

據我所知，這應該可以正常工作，如果您在拖動項目時查看控制臺，您會看到寫出的 id，這意味著它可以很好地找到元素并獲取它的 id 屬性.問題是，是不設置數據還是不獲取數據?

As far as I can tell this should work perfectly fine and if you look at the console while dragging an item you will see the id written out, which means that it's finding the element just fine and grabbing it's id attribute. The question is, is it just not setting the data or not getting the data?

我非常感謝您的建議，因為經過一周的努力，經過 3 次嘗試和大約 200 多個版本，我開始失去理智.我所知道的是它曾經在 60 版左右可以工作，并且特定的代碼根本沒有改變......

I'd appreciate suggestions because after a week of working on this with three attempts and some 200+ versions, I'm starting to loose my mind. All I know is it used to work back in version 60 or so and that specific code hasn't changed at all...

實際上，6X 和 124 之間的主要區別之一是我將事件綁定從 live() 更改為 on().我不認為這是問題所在，但在處理此問題時，我發現 Chrome 在 DnD 方面出現了幾次失敗. 這已被揭穿.事件綁定方法對問題沒有影響.

Actually, one of the major differences between 6X and 124 is that I changed the event binding from live() to on(). I don't think that's the issue, but I've come to see a couple failures from Chrome when it comes to DnD while working on this. This has been debunked. The event binding method has no effect on the issue.

更新

我創建了一個新的 JSFiddle，它完全去除了所有內容，只留下了事件綁定和處理程序.我使用 jQuery 1.7.2 和 1.8 對它進行了測試，同時使用了 on() 和 live().問題仍然存在，所以我降低了一個級別并刪除了所有框架并使用純 JavaScript.問題仍然仍然存在，因此根據我的測試，不是我的代碼失敗了.相反，Chrome、Safari 和 Opera 似乎都在實施不符合規范的 setData() 或 getData()，或者只是由于某種原因而失敗.如果我錯了，請糾正我.

I've created a new JSFiddle that strips out absolutely everything and just leaves the event binding and handlers. I tested it with jQuery 1.7.2 and 1.8 with both on() and live(). The issue persisted so I dropped down a level and removed all frameworks and used pure JavaScript. The issue still persisted, so based on my testing it's not my code that's failing. Instead it appears that Chrome, Safari and Opera are all implementing either setData() or getData() off spec or just failing for some reason or another. Please correct me if I'm wrong.

無論如何，如果您查看新的 JSFiddle，您應該能夠復制該問題，只需在您拖動指定接受放置的元素時查看控制臺.我已經用 Chromium 開了一張票.最后我可能仍然做錯了什么，但我現在根本不知道如何做 DnD.新的 JSFiddle 被盡可能地精簡了......

Anyway, if you take a look at the new JSFiddle you should be able to replicate the issue, just look at the console when you're dragging over an element designated to accept a drop. I've gone ahead and opened a ticket with Chromium. In the end I may still be doing something wrong, but I simply don't know how else to do DnD at this point. The new JSFiddle is as stripped down as it can get...

推薦答案

好的，經過一番挖掘，我發現問題實際上不在于 Chrome、Safari 和 Opera.泄露的是 Firefox 支持它，我不能說其他瀏覽器都失敗了，因為我通常會接受 IE.

Ok, so after a bit more digging around, I found that the problem actually isn't with Chrome, Safari, and Opera. What gave it away was that Firefox was supporting it and I just couldn't say the other browsers are failing, since that's something I'd normally accept for IE.

問題的真正原因是 DnD 規范本身.根據 drag、dragenter、dragleave、dragover 和 dragend 的規范事件拖動數據存儲模式是保護模式.你問什么是保護模式?它是:

The real cause of the issue is the DnD specification itself. According to the spec for the drag, dragenter, dragleave, dragover and dragend events the drag data store mode is protected mode. What is protected mode you ask? It is:

對于所有其他事件.拖動數據存儲中的格式和種類可以枚舉表示拖動數據的項目列表，但數據本身不可用，無法添加新數據.

For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

這意味著，您無權訪問您設置的數據，即使在只讀模式下也不行！您自己去 f@&#.".真的嗎?想出這個的天才是誰?

That translates to, "you have no access to the data that you set, not even in read only mode! Go f@&# yourself.". Really? Who'se the genius that came up with this?

現在，要繞過這個限制，您幾乎沒有選擇，我只會概述我想出的兩個.您的第一個是使用邪惡的全局變量并污染全局命名空間.您的第二個選擇是使用 HTML5 localStorage API 來執行與 DnD API 應該提供的完全相同的功能！

Now, to get around that limitation you have few choices, and I'm only going to outline two that I've come up with. Your first one is to use an evil global variable and pollute the global namespace. Your second choice is to use the HTML5 localStorage API to perform the EXACT same functionality that the DnD API should have provided to begin with!

如果你沿著這條路線走，我有，你現在實現兩個 HTML5 API 不是因為你想要，而是因為你不得不.現在我開始欣賞 PPK 關于災難的咆哮 HTML5 DnD API 是.

If you go down this route, which I have, you're now implementing two HTML5 APIs not because you want to, but because you have to. Now I'm starting to appreciate PPK's rant about the disaster that the HTML5 DnD API is.

最重要的是，需要更改規范以允許訪問存儲的數據，即使它僅處于只讀模式.在我的情況下，使用這個 JSFiddle，我實際上是在使用 dragenter 作為一種查看方式在放置區前面并確認我是否應該允許放置.

The bottom line is this, the spec needs to be changed to allow for access to the stored data even if it's only in read only mode. In my case, with this JSFiddle, I'm actually using the dragenter as a way to look ahead at the drop zone and verify that I should allow a drop to occur or not.

在這種情況下，Mozilla 顯然選擇不完全遵守規范，這就是我的 JSFiddle 在其中運行良好的原因.碰巧這是我完全支持不支持完整規范的一次.

In this case Mozilla apparently opted out of full compliance with the spec which is why my JSFiddle was working just fine in it. It just so happens that this is the one time I fully support not supporting the full specification.

這篇關于HTML5 DnD dataTransfer setData 或 getData 不能在除 Firefox 之外的所有瀏覽器中工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！