javascript - 如何在事件 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 对象，该对象包含发生不同操作所需的所有信息。但是，根据您访问此数据存储的事件，您可以对这些信息执行的操作有一些限制。有3种模式，定义如下:

A drag data store mode, which is one of the following:

Read/write mode

For the dragstart event. New data can be added to the drag data store.

Read-only mode

For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.

Protected mode

For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

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

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

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