<html>

<body>
  <div ondrop="deleteDiv(event)" ondragover="allowDrop(event)" class="container">
    <div id="item1" ondragstart="drag(event)" draggable="true" class="items">Item1</div>
    <div id="item2" ondragstart="drag(event)" draggable="true" class="items">Item2</div>
    <div id="item3" ondragstart="drag(event)" draggable="true" class="items">Item3</div>
  </div>
  <div class="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">

  </div>
</body>

</html>
.items {
  aspect-ratio: 1/1;
  width: 50px;
  background-color: #5089C6;
  color: #fff;
  margin: 5px;
}

.container {
  border: 1px solid red;
}

.dropArea {
  border: 1px solid blue;
  margin-top: 50px;
  aspect-ratio: 1/0.5;
}
var count = 0;

function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();

  const id = ev.dataTransfer.getData("childID");

  if (id.startsWith("dragged") || !id) {
    return;
  }

  const nodeCopy = document.getElementById(id).cloneNode(true);

  nodeCopy.id = "dragged" + id + count++;

  nodeCopy.addEventListener("dragstart", drag);

  ev.target.appendChild(nodeCopy);
}

function deleteDiv(ev) {
  ev.preventDefault();

  const id = ev.dataTransfer.getData("childID");

  if (!id.startsWith("dragged")) {
    return;
  }
  const el = document.getElementById(id);
  el.parentNode.removeChild(el);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.