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

Question

我有一个代码:

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以不同的方式实现了这一点,但在任何情况下都不应该依赖它.

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