<html>

<body>

  <div id="container1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div draggable="true" ondragstart="drag(event)" id="item1" class="item"></div>
  </div>

  <div id="container2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>
#container1 {
  width: 100px;
  aspect-ratio: 1/1;
  border: 1px solid black;
}

#container2 {
  margin-top: 10px;
  width: 100px;
  aspect-ratio: 1/1;
  border: 1px solid red;
}

.item {
  width: 50px;
  aspect-ratio: 1/1;
  background-color: #5089C6;
}
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("childID", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("childID");
  ev.target.appendChild(document.getElementById(data));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.