1

几个小时以来，我一直在尝试获得 drop 事件。所有其他事件都可以正常工作。拖车好。Dragenter 好的。等等，但不是 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 布局。

4

1 回答 1

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>

于 2018-06-14T14:23:20.613 回答