Drag and drop when dragging one picture another picture is dropping

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>

When I am dragging pictures to another divs it is always a Corgi picture appears for some reason. I tried using html5_draganddrop w3schools guide to make it but there is only one picture with two divs and I have multiple pictures and multiple divs and as I understand this guide doesn't work for me

Answer 1

The problem in your code is that all of the images have the same id. To take this a step further, if you want to have a custom image show when dragging you can do the following.

In the dragstart event handler you want to add the drag image. The second and third parameters in the setDragImage function are X and Y offsets. You can view more information about this at: 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);
}