javascript - 无法使用 HTML5 拖放 API 获取拖放事件

Question

几个小时以来，我一直在尝试获取 drop 事件。所有其他事件都正常。拖车好。好吧。等等 但不是 drop 事件。

这是 JS 代码:

function onDragStart(event)
{
    console.log("dragStart");
    event.dataTransfer.setData("text/plain", "data");
}

function onDrop(event)
{
    console.log('onDrop');
}
document.querySelector('span[draggable="true"]').addEventListener('dragstart', onDragStart, false);
document.querySelector('#cell_1').addEventListener('drop', onDrop, false);

HTML 是这样的:

<div id="cell_1" class="cell"><span draggable="true">1</span></div>

使用网格 css 布局。

Answer 1

我已经将事件嵌入到标签中，但您仍然可以使用 querySelectors #LazyCoding

这是我在 HTML Drag and Drop API 的帮助下得到的结果

我很确定您也需要使用 dragOver 来允许拖放，但我不是 100% 确定。

---

function onDragStart(event) {
  console.log("dragStart");
  
  // Add the target element's id to the data transfer object
  event.dataTransfer.setData("text/plain", event.target.id);
  event.dropEffect = "move";
}

function onDragOver(event) {
  console.log("dragOver");
  
  event.preventDefault();
  // Set the dropEffect to move
  event.dataTransfer.dropEffect = "move"
}

function onDrop(event) {
  console.log("drop");
  
  event.preventDefault();
  // Get the id of the target and add the moved element to the target's DOM
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

div {
  border: 1px solid;
  height: 100px;
}

span {
  background: cyan;
}

<span id="myCustomId" draggable="true" ondragstart="onDragStart(event);">
Drag Me
</span>

<div id="cell_1" class="cell" ondrop="onDrop(event);" ondragover="onDragOver(event);">
  Drop Zone
</div>