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

Question

我正在尝试掌握 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') returns 空字符串，以及我能想到的所有其他可能性。

Answer 1

根据HTML5拖放规范的Event-Summary，Drag data store的dragover事件的模式是保护模式.

Protected mode:

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.

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

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

This is by design

这是 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>

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

Drag dataTransfer data unavailable in ondragover event

html

javascript

html5-draggable