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