javascript - 如何修复多张图片的拖放问题？

Question

我正在尝试解决此拖放代码的问题。当我尝试拖动一个不是 8 的图像时，8 会自动上升，我无法将任何其他图像拖到 div 框中。

此外，在拖动图像后，如果在 google 中进入检查模式，如果您尝试将 8 所在的位置拖动到图像应该去的框中，google 会给出一条消息:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (Assignment10.html:41)
    at HTMLDivElement.ondrop (Assignment10.html:50)

如何修复此代码？

我实际上什么都没试过，因为我不知道如何修复这段代码。

//JS for the drag-and-drop
function drag(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function permitDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
}

#draginto {
  width: 1520px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
}

#cards {
  width: 64%;
}

#cards img {
  float: right;
  margin: 2px;
  display: block;
}

!-- The box the images are dragged into--
<div id="draginto" ondragover="permitDrop(event)" ondrop="drop(event)">
</div>

!--The div with the cards in them--
<div id="cards">
  <img src="https://via.placeholder.com/100x100?text=d8" draggable="true" id="dragto" ondragstart="drag(event)">
  <img src="https://via.placeholder.com/100x100?text=dJ" draggable="true" id="dragto" ondragstart="drag(event)">
  <img src="https://via.placeholder.com/100x100?text=dK" draggable="true" id="dragto" ondragstart="drag(event)">
  <img src="https://via.placeholder.com/100x100?text=d10" draggable="true" id="dragto" ondragstart="drag(event)">
  <img src="https://via.placeholder.com/100x100?text=dQ" draggable="true" id="dragto" ondragstart="drag(event)">
  <img src="https://via.placeholder.com/100x100?text=d9" draggable="true" id="dragto" ondragstart="drag(event)">
</div>

我希望所有图片都能被拖到框中，而不仅仅是一张。

Answer 1

1. 您有重复的 ID。不能有多个具有相同 ID 的元素，否则只有第一个被选中，因此您只能移动 8，因为它是 ID 为 dragto 的第一个元素。
2. 在拖放事件处理程序中，您应该检查 event.target 是否是 #draginto div，如果是，则移动拖动的元素，否则什么也不做:

像这样:

function drop(event) {
  let target = event.target;
  if(target.id === "draginto") {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    target.appendChild(document.getElementById(data));
  }
}