HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件？

Posted 2023-05-08

【中文标题】HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件？

【英文标题】：HTML5 Drag and Drop getData() only works on drop event in Chrome?

【发布时间】：2012-03-21 00:54:21

【问题描述】：

我目前正在使用 html5 拖放 API 开发一个项目，以提供附加功能，包括将项目拖入和拖出浏览器。我目前遇到了特定于 Chrome 的问题（否则仅在 Firefox 中测试，可以按预期工作）。

问题是我无法使用event.dataTransfer.getData(type) 方法在除drop 事件之外的任何事件中返回dragstart 事件上的数据集。

在绑定到dragstart 事件（确实会触发）之后，我将事件设置为这样：

event.dataTransfer.setData('text/plain', "some string")

那么在drop事件中，我就可以正常获取数据了。

event.dataTransfer.getData('text/plain')

但是我不能在任何其他事件（例如dragover）上使用与上述相同的方法。即使我在调用setData()后尝试使用上述方法上线（即在dragstart回调中），那么它仍然会返回undefined。

因此，在 Chrome 中，问题在于 Chrome 中的 getData 将始终返回 undefined，除非在 drop 事件回调中。 （在 Firefox 中，我可以成功获取正确的数据。）

如果你有对同一个拖动元素的dataTransfer对象的引用，那为什么要等到它被放下才能得到数据呢？

只是想知道：

以前有人在使用 Chrome 时遇到过这种问题吗？ 有哪些解决方法？ 或者，这是 Chrome 需要修复的问题吗？

资源： Specification for HTML5 drag and drop.

【问题讨论】：

This bug report 似乎相关。

HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox的可能重复

【参考方案1】：

WebKit 以及 Chrome 对您何时可以调用 getData 有很大的限制。您不能在 dragstart or dragover 内进行操作。我认为this is the canonical bug。

【讨论】：

@Lombas 它应该可以工作，因为该错误的状态显示截至 2013 年 3 月 22 日已解决

【参考方案2】：

引用this answer：

数据仅在拖放时可用，这是一项安全功能，因为当您碰巧在网页上拖动某些内容时，网站可能会抓取数据。