如何使多个元素拖放？答案

【问题标题】：How to make multiple elements drag and drop?如何使多个元素拖放？
【发布时间】：2022-01-22 10:30:32
【问题描述】：

我需要使 3 个元素（嘴巴、左眼、右眼）可拖放到带有背景的 div 上（面部被剪掉）。删除每个元素后，会出现一个文本。

我正在努力实现的目标

可拖动图片与背景大小相同。我已经尝试了一些东西，但我还没有真正做到：

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #div1 {
         width: 1554px;
         height: 874px;
         border: 1px solid #aaaaaa;
         z-index: 1;
         }
         #drag1 {
         width: 1554px;
         height: 874px;
         z-index: 2;
         }
         #drag2 {
         width: 1554px;
         height: 874px;
         z-index: 3;
         }
         #drag3 {
         width: 1554px;
         height: 874px;
         z-index: 4;
         }
      </style>
      <script>
         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));
         }
         
      </script>
   </head>
   <body>
      <div id="div1" style="background-image: url('https://blondtrickster.com/wp-content/uploads/2021/12/BACKGROUND.png');" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <br>
      <img id="drag1" src="https://blondtrickster.com/wp-content/uploads/2021/12/SUU.png" draggable="true" ondragstart="drag(event)">
      <img id="drag2" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_VASAK.png" draggable="true" ondragstart="drag(event)">
      <img id="drag3" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_PAREM.png" draggable="true" ondragstart="drag(event)">
   </body>
</html>

非常感谢您的帮助，因为我是一个初学者。

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

问题在于您的 CSS 规则。现在，当您附加子项时，第二个 IMG 放在第一个下方，因此您必须确保所有 IMG 元素彼此堆叠。我通过设置来做到这一点

   "position: absolute; top: 0; left: 0"

在每张图片上。

完整的 CSS：

html,
  body {
     margin: 0;
     padding: 0;
  }

  #div1 {
     width: 1554px;
     height: 874px;
     border: 1px solid #aaaaaa;
     z-index: 1;
  }

  #div1 #drag1 {
     position: absolute;
     top: 0;
     left: 0;
     width: 1554px;
     height: 874px;
     z-index: 2;
  }

  #div1 #drag2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 1554px;
     height: 874px;
     z-index: 3;
  }

  #div1 #drag3 {
     position: absolute;
     top: 0;
     left: 0;
     width: 1554px;
     height: 874px;
     z-index: 4;
  }

这是我得到的：

【讨论】：