12

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

4

1 回答 1

22

根据HTML5 Drag&Drop 规范的Event-SummaryDrag data store ，的dragover事件模式为Protected mode。

保护模式：

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

这适用于文件和 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>

于 2016-12-02T21:17:14.150 回答