javascript - 拖动数据传输数据在 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')返回空字符串，以及我能想到的所有其他可能性。

Answer 1

根据Event-Summary HTML5 Drag&Drop 规范，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>