HTML5 DnD dataTransfer setData 或 getData 不能在除 Firef

本文介绍了HTML5 DnD dataTransfer setData 或 getData 不能在除 Firefox 之外的所有浏览器中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

考虑一下这个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...

HTML5 DnD dataTransfer setData 或 getData 不能在除 Firef

问题描述

推荐答案

相关文档推荐