我的 DragTarget 只接收首先列出的图像。我该如何改变？答案

【问题标题】：My DragTarget only receives the image that is listed first. How do I change this?我的 DragTarget 只接收首先列出的图像。我该如何改变？
【发布时间】：2021-12-26 19:54:44
【问题描述】：

这两个图像都旨在被拖入leftbox div。当您拖动橙色图像上方列出的蓝色图像时。它成功落入leftbox。当您将橙色图像拖动到放置目标时，蓝色图像会在放置后替换它。这是因为它列在橙色图像的上方。我通过交换代码顺序对此进行了测试。将橙色图像放在首位。橙色图像是当时唯一的接收者。任何帮助表示赞赏。

function allowdrag(e) {
  e.preventDefault();
}

function Drop(e) {
  e.preventDefault();
  var texts = e.dataTransfer.getData('image/png')
  var data = document.getElementById(texts);
  e.target.appendChild(data)
}

function drog(e) {
  e.dataTransfer.setData('image/png', e.target.id)
}

#leftbox {
  width: 20%;
  height: 175px;
  border: 5px solid grey;
  border-radius: 0px;
  padding: 0px;
  margin: 75px 15px 0px 100px;
  display: inline-block;
  background-color: white;
  position: relative;
}

#image1 {
  height: 175px;
  width: 138px;
  display: table;
  margin-bottom: 75px;
  display: inline-block
}

#reset {
  height: 0;
  width: 21%;
  padding-bottom: 18%;
  position: absolute;
  right: 0px;
  background-image: url(https://win-conditions.com/wp-content/uploads/2021/12/download-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

<div id="leftbox" ondrop="Drop(event)" ondragover="allowdrag(event)">
  <button id="reset" type="button"></button>
</div>

<div id="image">
  <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/electrospirit.png" draggable="true" ondragstart="drog(event)">
  <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/fire_spirits-1.png" draggable="true" ondragstart="drog(event)">
</div>

JSFiddle：https://jsfiddle.net/0h7c45kj/1/

【问题讨论】：

标签： javascript drag-and-drop

【解决方案1】：

您的图片应该有不同的 ID：

<img id="image1" ... >
<img id="image2" ... >

【讨论】：