使用拖放时appendChild不起作用

问题描述

我想使用拖放操作将一个框的内容移动到另一个框。同一盒中的内容不应插入同一盒中。

这是我尝试过的：

// Drag and the drop the items
const elements = document.querySelectorAll('#Box1,#Box2');

for (let element of elements) {
  // Allow the drop 
  element.addEventListener("dragover",function(event) {
    event.preventDefault();
  },false);

  element.addEventListener('drop',(evt) => {
    evt.preventDefault();
    const data = evt.dataTransfer.getData("text/plain");
    console.log(data);
    document.appendChild(data);
  });
}

.Box {
  width: 100px;
  height: 100px;
}
#Box1 {
  background: red;
}
#Box2 {
  background: yellow;
}

<div draggable="true" class="Box" id="Box1"><strong>1</strong></div>
<div draggable="true" class="Box" id="Box2"><strong>2</strong></div>

问题：什么都没有插入，并且出现错误无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

解决方法

appendChild始终有效，这就是您使用它的方式

const data = evt.dataTransfer.getData("text/plain");
    console.log(data);
    document.appendChild(data);

数据是HTML元素吗？看起来只是文本，我想您的意思是evt.target或其他内容

如果不只是制作一个新元素并将其内容设置为最新的，那就参加新元素

我也不认为您可以将其直接附加到文档中，我认为您需要执行document.body或其他节点

drag-and-drop javascript