Question

我一直试图从小时开始接下来。所有其他活动都很好。 dragover好的。 dragenter好的。等但不是掉落事件。

这是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>

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

1 个答案: