如何从datattransfer获取数据.在拖放或拖放事件中调用getData

Question

我有一个代码来设置数据在dragstart:

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);

那么，如何在事件拖放或拖放中获取数据?

Answer 1

通常情况下，您无法访问dragstart和drop以外的事件的此信息。火狐似乎可以让你访问，但它似乎违背了标准。

在拖放过程中传输数据的方式是通过data store对象，该对象包含发生不同操作所需的所有信息。但是，根据访问该数据存储的event，对该信息的处理有一定的限制。有三种模式，定义如下:

一种拖动数据存储模式，它是下列模式之一:

读/写模式

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

<<p> 只读模式/strong>

用于删除事件。表示拖动数据的项列表可以是读取，包括数据。不能添加新数据。

保护模式

用于所有其他事件。拖动数据存储中的格式和类型表示拖动数据的项列表可以枚举，但是数据本身不可用，不能添加新数据。

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

拖拽时，数据存储处于保护模式，因此数据应该不可用。同样，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   
    }
});