如何从事件Dragover或Dragenter中的DataTransfer.getData获取数据

我有一个代码：

element.addEventListener('dragstart',function(e){ e.dataTransfer.setData('Text', 'something is here'); },false); 

当我在事件Drop运行时从DataTransfer.getData获取数据时。 但是当我想在事件dragover或dragenter中获取数据时，数据为空。

 element.addEventListener('dragover',function(e){ var a = e.dataTransfer.getData('Text'); console.log(a); },false); 

那么，如何在事件dragover或dragenter中获取数据

Answer 1

通常，您无法访问除dragstart和drop之外的事件的此信息。 Firefox似乎为您提供访问权限，但它似乎违反了标准。

在拖放过程中传输数据的方式是通过data store对象，该对象包含发生不同操作所需的所有信息。 但是，根据您访问此数据存储的event ，您可以对此信息执行某些限制。 有3种模式，定义如下：

拖动数据存储模式，它是以下之一：

读/写模式

对于dragstart事件。 可以将新数据添加到拖动数据存储中。

只读模式

对于掉落事件。 可以读取表示拖动数据的项目列表，包括数据。 无法添加新数据。

保护模式

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

https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

因此，在dragover上，数据存储处于保护模式，因此数据不可用。 同样，Firefox以不同的方式实现了这一点，但在任何情况下都不应该依赖它。

出于安全原因，这些模式存在，这些数据传输不仅允许传输同一页面的元素，而且传输来自其他应用程序，文件等的数据。