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

Posted

技术标签:

【中文标题】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:

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

【讨论】:

以上是关于HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Websocket 仅适用于本地主机

用于移动的html5拖放[重复]

C# 拖放 - 使用基类的 e.Data.GetData

用于 HTML5 拖放的 DropEffect 语义

vue+html5+原生dom+原生JavaScript实现跨区域拖放

日期选择器 html5 标记不适用于 Mozilla、IE 浏览器。但它仅适用于 Chrome