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

Posted 2023-05-09

【中文标题】如何在事件 Dragover 或 Dragenter 中从 DataTransfer.getData 获取数据

【英文标题】：how to get data from DataTransfer.getData in event Dragover or Dragenter

【发布时间】：2015-11-02 03:17:18

【问题描述】：

我有一个代码：

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 中获取数据

【参考方案1】：

除dragstart 和drop 之外，您通常无权访问有关事件的此信息。 Firefox 似乎可以让您访问，但它似乎违反了标准。

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

一种拖拽数据存储模式，为以下之一：

读/写模式

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

只读模式

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

保护模式

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

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

所以在拖拽时，数据存储处于保护模式，因此数据不应该可用。同样，Firefox 以不同的方式实现这一点，但无论如何您都不应该依赖它。

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

【讨论】：

很遗憾，情况就是这样；如果您不知道被拖动的是什么，它会使绘制占位符并知道dataTransfer.dropEffect 应该是相当困难的。

如果您控制了拖动启动，那么您就可以访问。如果你不这样做，那么限制你可以知道的内容是有意义的，否则你可以在用户不知道的情况下访问被拖动到页面上的内容。

要从页面A跨窗口拖动到同一域内的任意页面B，我们无法从放置目标页面访问dragstart，这很粗糙。替代方案？：传递消息（但我们不知道目标页面的 URL……只是域），在 dataTransfer.types 字段中包含一些字符串类型的信息，或者在两个页面之间与服务器异步协调。跨度>

dataTransfer.types 确实有助于识别拖动对象上当前存在的数据类型。因此，如果您在“dragstart”上添加了一些数据，您可以检查“dragover”中的数据类型。显然，如果您绝对需要，您也可以“破解”它并将您的整个字符串化信息存储在那里。

在同一个文档中拖动时拥有此信息会很有意义