拖动数据传输数据在 ondragover 事件中不可用

Posted 2023-05-08

【中文标题】拖动数据传输数据在 ondragover 事件中不可用

【英文标题】：Drag dataTransfer data unavailable in ondragover event

【发布时间】：2017-04-17 20:11:17

【问题描述】：

我正在尝试掌握 html5 拖放事件。

function rowDragStart(event) 
    let targetRowId = event.target.attributes.row.value;
    event.dataTransfer.setData("text/plain", targetRowId);


function rowDragOver(event) 
    event.preventDefault();
    let draggingId = event.dataTransfer.getData('text');

现在我只是想在dragStart 中的dataTransfer 对象中放一些东西，然后在dragOver 中检索它。问题是它不存在于拖拽中。我设置了断点，这些事件正在被调用，但是getData('text') 返回空字符串，以及我能想到的所有其他可能性。

【参考方案1】：

根据HTML5 Drag&Drop规范的Event-Summary，Drag data store的dragover事件的模式为保护模式。

保护模式：

表示被拖数据的项的拖数据存储列表中的格式和种类可以枚举，但数据本身不可用，不能添加新数据。

这适用于文件和 html5 元素的拖放。

换句话说 - 您可以访问被拖动元素的类型和被拖动元素的数量，但在您进行实际放置之前，它们的数据不可用。

这是设计使然

以下是 HTML5 元素拖放示例：

function dragstart_handler(ev) 
  console.log("drag start");
  // Change the source element's background color to signify drag has started
  ev.currentTarget.style.border = "dashed";
  // Set the drag's format and data. Use the event target's id for the data 
  ev.dataTransfer.setData("text/plain", ev.target.id);


function dragover_handler(ev) 
  console.log("drag over, total types:", ev.dataTransfer.types.length, 'type available:', ev.dataTransfer.types[0]);
  ev.preventDefault();


function drop_handler(ev) 
  console.log("drop, total types:", ev.dataTransfer.types.length, 'data dropped:', ev.dataTransfer.getData('text/plain'));
  ev.preventDefault();
  
  // Clear the drag data cache (for all formats/types)
  ev.dataTransfer.clearData();

div 
  margin: 0em;
  padding: 2em;

#source 
  color: blue;
  border: 1px solid black;

#target 
  border: 1px solid black;

<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>

【讨论】：

杰出 - 非常感谢！我想这就是为什么许多样本只使用共享变量来存储有关拖动行的信息。