拖放堆叠多个图像 div

Question

我知道有很多关于这个主题的问题和答案，但我找不到与我的确切问题相关的答案。

由于 COVID19，我不能与我的学生共享和使用实体卡，因此我尝试实施 HTML5 应用程序作为替代方案。

我有一个包含多个 div 的网格（每个都有一个类似于每张卡片的图像），学生必须一次拿一个并将其拖放到另一个 div 中，所以掉落的卡片必须相互重叠。这些图像将具有透明背景，因此如果它们 select 适当的卡片，它们将获得所有堆叠卡片的正确图像。

我已经设法将 dividual 卡片从其原始 div 拖放到目标并返回到其原始 div，但是当我放下不止一张卡片时同样div，后面掉落的卡牌消失

我不知道是不是保险丝或者发生了什么，但是虽然在这个代码片段中图像是相同的，但我使用的图像没有显示融合（记住它们有透明背景，如果我可以很容易地看到正在将两张卡片粘在一起）。

我不是开发人员，所以我会喜欢纯 JS 解决方案，因为这样我认为我可以更好地控制和理解我在做什么。

我该如何解决这个问题？

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

谢谢。

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  //~ ev.target.style.backgroundImage = document.getElementById(data);
}

#drag1, #drag2, #drag3, #drag4{
width: 100%;
height: 100%;
}       

#div1{
  float: left;
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

#div2 {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto ;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

.row {
  display: flex;
}

      
<div class="grid-container">
    
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" draggable="true" ondragstart="drag(event)" id="drag1" >
</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" draggable="true" ondragstart="drag(event)" id="drag2" >
</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" draggable="true" ondragstart="drag(event)" id="drag3" >
</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" draggable="true" ondragstart="drag(event)" id="drag4" >
</div>
<div>
  <div id ="div2" class="grid-item" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>  
</div>

Answer 1

@sol 指出了我正确的方向，最后我设法解决了这个问题，只是稍微改变了 drop 事件，如下所示：

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

我确保目标始终相同，因此尽管 div 包含多个图像，但放置目标始终是它们的 parent 节点，因此 div，容器。但是，这需要 div 作为开头的 child，我使用和图像作为卡片的模板。否则，放置事件将查找 div 的 parent 而不是 div 本身（child parent）。希望我已经解释清楚了。

拖放堆叠多个图像 div

Drag and drop stacking multiple images on a div

html

javascript

css

overlay

drag-and-drop