Javascript 在div上拖放堆叠多个图像

我知道有很多关于这个话题的问题和答案，但我找不到一个与我的问题完全一致的

由于COVID19，我不允许与我的学生共享和使用物理卡，因此我尝试实现HTML5应用程序作为替代方案

我有一个有多个div的网格，每个div都有一个类似于每张卡片的图像，学生必须一次取一张，然后将其拖放到另一个div中，因此拖放的卡片必须相互重叠。图像将具有透明背景，因此如果他们选择适当的卡，他们将获得所有堆叠卡的正确图像

我已经成功地将单个卡从其原始div拖放到目标并返回到其原始div，但是当我在同一div中拖放多张卡时，后一张被拖放的卡就会消失

我不知道是保险丝还是发生了什么，但尽管在这个代码片段中，图像是相同的，但我使用的图像没有显示保险丝。记住，它们有透明的背景，如果我将两张卡粘在一起，就很容易看到

我不是一个开发人员，所以我希望有一个纯JS解决方案，因为这样我可以更好地控制和理解我正在做的事情

如何解决此问题

下一步将涉及使用socket.io，这样所有人都可以一起玩，这样任何人都可以在他/她的PO中看到其他学生移动了哪些卡，而不是他们自己的卡。但在我解决这个问题之前，我会留下这些问题

多谢各位

函数allowDropev{ 防止违约； } 函数dragev{ ev.dataTransfer.setDatatext，ev.target.id； } 函数dropev{ 防止违约； var data=ev.dataTransfer.getDatatext； ev.target.appendChilddocument.getElementByIddata； //~ev.target.style.backgroundImage=document.getElementByIddata； } drag1，drag2，drag3，drag4{ 宽度：100%； 身高：100%； } 第一组{ 浮动：左； 宽度：25px； 高度：25px； 边框：1px纯黑； } 第二组{ 浮动：左； 宽度：50px； 高度：50px； 边框：1px纯黑； } .网格容器{ 显示：网格； 网格模板列：自动； 网格模板行：自动； } *[draggable=true]{ -moz用户选择：无； -khtml用户拖动：元素； 光标：移动； } .行{ 显示器：flex； }

---

当@sol为我指明了正确的方向时，我最终成功地解决了这个问题，只需稍微更改一下drop事件，如下所示：

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var parent = ev.target.parentNode;
  parent.appendChild(document.getElementById(data));
}

我确保目标始终相同，因此尽管div包含多个图像，但放置目标始终是它们的父节点，因此div是容器。

---

但是，这就要求div从一开始就作为一个孩子，我使用和图像作为卡的模板。否则，drop事件将查找div的父级，而不是div本身的子级父级。我希望我已经正确地解释了。

问题在于电动汽车的目标发生了变化。第一个映像被放到div上，第二个映像被放到第一个映像上-所以appendChild失败了。我想是这样的。如何强制将图像始终放在同一个div上？可行吗？我是说，一个div能收集到我想要的图像吗？我也尝试过背景，没有任何运气。