49

考虑这个JSFiddle。它在 Firefox (14.0.1) 中运行良好，但在 Windows (7) 和 OS X (10.8) 上的 Chrome (21.0.1180.75)、Safari (?) 和 Opera(12.01?) 中失败。据我所知，问题出在对象上的setData()orgetData()方法上。dataTransfer这是来自 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 属性。问题是，是不设置数据还是不获取数据？

我会很感激建议，因为经过一周的尝试和大约 200 多个版本，我开始失去理智。我所知道的是它曾经在 60 版左右工作，并且特定代码根本没有改变......

实际上，6X 和 124 之间的主要区别之一是我将事件绑定从 更改live()为on(). 我不认为这是问题所在，但在处理 DnD 时，我发现 Chrome 出现了一些失败。这已被揭穿。事件绑定方法对问题没有影响。

更新

我创建了一个新的JSFiddle，它完全去除了所有内容，只留下了事件绑定和处理程序。我用 jQuery 1.7.2 和 1.8on()和live(). 问题仍然存在，所以我降低了一个级别并删除了所有框架并使用纯 JavaScript。问题仍然存在，因此根据我的测试，不是我的代码失败了。相反，Chrome、Safari 和 Opera 似乎都在实施setData()或getData()不符合规范，或者只是由于某种原因而失败。如果我错了，请纠正我。

无论如何，如果您查看新的 JSFiddle，您应该能够复制该问题，只需在拖动指定接受放置的元素时查看控制台。我已经开始使用Chromium开了一张票。最后我可能仍然做错了什么，但我现在根本不知道如何做 DnD。新的 JSFiddle 被尽可能地精简了......

4

8 回答 8

88

好的，经过一番挖掘，我发现问题实际上不在于 Chrome、Safari 和 Opera。给出的结果是 Firefox 支持它，我不能说其他浏览器都失败了，因为我通常会接受 IE。

问题的真正原因是DnD 规范本身。根据, ,和events 的规范drag，拖动数据存储模式是保护模式。你问什么是保护模式？这是：dragenterdragleavedragoverdragend

对于所有其他事件。表示拖动数据的项的拖动数据存储列表中的格式和种类可以枚举，但数据本身不可用，不能添加新数据。

这意味着，“您无法访问您设置的数据，即使在只读模式下也不行！自己去 f@&#。” . 真的吗？想出这个的天才是谁？

现在，要绕过这个限制，您几乎没有选择，我只会概述我想出的两个。您的第一个是使用邪恶的全局变量并污染全局命名空间。您的第二个选择是使用 HTML5 localStorage API 来执行与 DnD API 应该提供的完全相同的功能！

如果你沿着我的这条路线走，你现在正在实现两个 HTML5 API，不是因为你想这样做，而是因为你必须这样做。现在我开始欣赏PPK对 HTML5 DnD API的灾难的咆哮。

最重要的是，需要更改规范以允许访问存储的数据，即使它仅处于只读模式。就我而言，使用这个 JSFiddle，我实际上是在使用dragenter来查看放置区域并验证我是否应该允许放置发生或不发生。

在这种情况下，Mozilla 显然选择不完全遵守规范，这就是为什么我的 JSFiddle 在其中运行良好的原因。碰巧这是我完全支持不支持完整规范的一次。

于 2012-08-14T19:26:51.603 回答
17

“受保护”位是有原因的......拖放可以跨越完全不同的窗口，他们不希望有人能够实现一个“监听器” DIV，它会窃听所有内容的内容拖过它（可能通过 AJAX 将这些内容发送到 Elbonia 的某个间谍服务器）。只有 DROP 区域（更清楚地在用户的控制之下）获得完整的独家新闻。

烦人，但我明白为什么它可能被认为是必要的。

于 2013-03-15T19:30:13.400 回答
14 
var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

问题在于“文本/纯文本”。MSDN 文档中 setData 的标准规范只是“文本”（没有 /plain）。在我尝试过的任何版本中，Chrome 都接受 /plain，但 IE 不接受。

我为同样的问题苦苦挣扎了好几个星期，试图弄清楚为什么我的“drop”事件在 IE 中没有正确触发，而在 Chrome 中却没有正确触发。这是因为 dataTransfer 数据没有正确加载。

于 2013-12-03T06:35:36.473 回答
6

我知道你已经回答了这个问题，但这是一个有用的线程——我只是想在这里添加一个附录——如果你自己设置数据，你可以随时将数据添加到字段本身（我知道很难看），但它可以避免重新创建功能：

例如，如果设置您自己的自定义数据：

  dataTransfer.setData('mycustom/whatever', 'data');

将数据附加为新的数据条目，并迭代：

  dataTransfer.setData('mycustom/whatever/data/{a json encoded string even}');

查询：

// naive webkit only look at the datatransfer.types
if (dataTransfer.types.indexOf('mycustom/whatever') >= 0) {

    var dataTest = 'mycustom/whatever/data/';

    // loop through types and create a map
    for (var i in types) {

        if (types[i].substr(0, dataTest.length) == dataTest) {

            // shows:
            // {a json encoded string even}
            console.log('data:', types[i].substr(dataTest.length));

            return; // your custom handler
        }
    }
}

仅在 chrome 中测试

于 2012-12-28T21:48:30.983 回答
2

还值得注意的是，如果您使用超时离开执行链，则 dataTransfer 对象将不再拥有您的数据。例如

function dropEventHandler(event){
    var dt = event.dataTransfer.getData("text/plain"); // works
    var myEvent = event;

    setTimeout(function(){
       var dt = myEvent.dataTranfer.getData("text/plain"); // null
    }, 1);
}
于 2015-06-26T12:56:12.973 回答
1

我在下面的代码中遇到了同样的错误：

event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));

我将代码更改为：

event.originalEvent.dataTransfer.effectAllowed = "移动"; event.originalEvent.dataTransfer.setData("text", event.target.getAttribute('id'));

它对我有用。

于 2016-02-19T06:12:06.513 回答
0

我遇到这篇文章是因为我对 Chrome 的功能dataTransfer.setData()和dataTransfer.getData()功能有类似的体验。

我的代码看起来像这样：

HTML:
<div ondragstart="drag(event)" ondrop="newDrop(event)"></div>

JAVASCRIPT:
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function newDrop(ev){
    var itemDragged = ev.dataTransfer.getData("text");
    var toDropTo = ev.target.id;
}

该代码在 Internet Explorer 中运行良好，但在 Chrome 中进行测试时，我无法使用newDrop 函数中的函数获取dataTransfer对象中设置的值（在拖动函数中设置） 。dataTransfer.getData()我也无法从语句中获取 id 值ev.target.id。

在网络上进行了一些挖掘之后，我发现我应该使用事件参数currentTarget属性而不是事件target属性。更新后的代码如下所示：

JAVASCRIPT:
function drag(ev) {
    ev.dataTransfer.setData("text", ev.currentTarget.id);
}
function newDrop(ev){
    var itemDragged = ev.dataTransfer.getData("text");
    var toDropTo = ev.currentTarget.id;
}

通过这一更改，我能够在 chrome 和 Internet Explorer 中使用dataTransfer.setData()和函数。dataTransfer.getData()我没有在其他任何地方测试过，我不确定为什么会这样。希望这会有所帮助，并希望有人可以给出解释。

于 2018-12-13T18:31:11.217 回答
0

我正在使用 Firefox 进行网站测试。

在我笔记本电脑上的 WAMP 中，像 OP 这样的代码可以工作。但是，当我将网站移至 HOSTMONSTER 时，它在那里不起作用。

我遵循了 Joshua Espana 的回答，它解决了我的问题。

失败的：

ev.dataTransfer.setData("text/plain", ev.target.id);

工作：

 ev.dataTransfer.setData("text", ev.currentTarget.id);

谢谢，约书亚！

于 2019-03-05T16:47:10.137 回答