拖动一张图片时拖放另一张图片正在拖放

Question

  <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>

  <div class="label">Akita Inu</div>
  <div class="box-wrapper">
  <div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="corgi.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
  </div>  
  
  <div class="label">Cockapoo</div>
  <div class="box-wrapper">
  <div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="akitainu.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
  </div>

  <div class="label">Corgi</div>
  <div class="box-wrapper">
  <div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="cockapoo.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
  </div>
  
  <div class="label">Shiba Inu</div>
  <div class="box-wrapper">
  <div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="shibaInu.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
  </div>

当我将图片拖到另一个 div 时，由于某种原因总是出现 Corgi 图片。我尝试使用 html5_draganddrop w3schools 指南来制作它，但只有一张图片有两个 div，而我有多张图片和多个 div，据我所知，本指南对我不起作用

Answer 1

您的代码中的问题是所有图像都具有相同的 ID。更进一步，如果您想在拖动时显示自定义图像，您可以执行以下操作。

在您要添加拖动图像的 dragstart 事件处理程序中。 setDragImage 函数中的第二个和第三个参数是 X 和 Y 偏移量。您可以在以下位置查看更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    let img = new Image();
    img.src = 'https://www.somedomain.com/myimage.png';
    ev.dataTransfer.setDragImage(img, 10, 19);
}

拖动一张图片时拖放另一张图片正在拖放

Drag and drop when dragging one picture another picture is dropping

html

css

drag

drop