HTML5 DnD dataTransfer setData或getData在Firefox之外的每个浏览器中都不起作用 [英] HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox

问题描述

请考虑这个 JSFiddle 。在Firefox（14.0.1）中可以正常工作，但Windows（7）和OS X（10.8）上的Chrome（21.0.1180.75），Safari（？）和Opera（12.01？）都失败。据我所知，问题在于$ code> setData（）或 getData（） c $ c> dataTransfer 对象。这是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?

我会感谢建议，因为经过一个星期的工作，三次尝试和一些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之间的主要区别在于我将事件绑定从（$）code> live（）更改为 on（）。我不认为这是问题，但是在处理DnD时，我已经看到Chrome的几个失败。这已经被剥离了。事件绑定方法对该问题没有影响。

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（） off spec或just由于某种原因而失败。如果我错了，请更正我。

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规范本身。根据拖动的规范， 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 @&＃自己。 / em>的。真？这是谁的天才，想出了这个？

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应该提供的与EXACT相同的功能！

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，而不是因为你想要，而是因为你有。现在，我开始感谢HTML5 DnD API是 PPK关于灾难的谣言

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之外的每个浏览器中都不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！