如何在 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 以不同的方式实现它，但在任何情况下您都不应该依赖它。

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

Answer 2

怎么样：

var dragged = undefined;

element.addEventListener('dragstart', function () {
    dragged = this;
});

element.addEventListener('dragend', function () {
    dragged = undefined;
});

element.addEventListener('dragenter', function (e) {
    //e.g.
    if (dragged.classList.contains('list-item')) {
        // do something   
    }
});