拖动数据在 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

根据HTML5拖放规范的事件摘要，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>