Why the second image is not being dropped in the correct position in html and Javascipt?

Question

I have the following code in which is implemented a simple drag and drop with an image. for some reason the first image works the second no, when I drug it inside the div boxes and It display outside of it. Someone know why the second image is displayed in bad with respect to the first one?

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));
  alert("Wrong")
}

#div4{
  position: absolute;
  left: 905px;
  top: 900px;
  width: 400px;
  height: 125px;
  margin: 10px;
  border: 5px solid black;
  background-color:white;
}
 #getData {
    width: 250px;
    height: 200px;
    border: 5px solid #4f4d4d;
    left: 400px;
    top = 500px
}

<h3>Drag the GeekforGeeks image into the rectangle:</h3>
<div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="center" src="Immagine.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
<img src="Immagine.png" id ="prova" draggable="true" ondragstart="drag(event)" style="position:absolute; margin-left:20.6%" width ="100" height="100">
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 1

The solution isn't that hard. You just tried to add a margin between the first image and the second image. And this made the image appear as if it was not appended to the parent div. As you can see in the figure both images are being appended to the div.

So you either remove the left margin on the second image. or remove it when it is being dropped.

Here is a working example of what I mean

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));
        
        //Set the value of your margin here
        //Don't raise the value so it doesn't overlap the container
        //And you can change the value from px to rem, em...
        document.getElementById(data).style.margin = 0 + "px";
        alert("Wrong");
      }

 #div4 {
        position: absolute;
        left: 905px;
        top: 900px;
        width: 400px;
        height: 125px;
        margin: 10px;
        border: 5px solid black;
        background-color: white;
      }
      #getData {
        width: 250px;
        height: 200px;
        border: 5px solid #4f4d4d;
        left: 400px;
        top: 500px;
      }

    <h3>Drag the GeekforGeeks image into the rectangle:</h3>
    <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img
      id="center"
      src="Immagine.png"
      draggable="true"
      ondragstart="drag(event)"
      width="100"
      height="100"
    />
    <img
      src="Immagine.png"
      id="prova"
      draggable="true"
      ondragstart="drag(event)"
      style="position: absolute; margin-left: 20.6%"
      width="100"
      height="100"
    />
    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>