Drag and Drop API

<div id="item" draggable="true"
     style="width:80px;height:80px;background:steelblue;cursor:grab;color:white;
            display:flex;align-items:center;justify-content:center;">Drag</div>
<div id="target"
     style="width:200px;height:120px;border:2px dashed #999;margin-top:10px;
            display:flex;align-items:center;justify-content:center;">Drop here</div>
<script>
document.getElementById("item").addEventListener("dragstart", e =>
  e.dataTransfer.setData("text/plain", "item")
);
document.getElementById("target").addEventListener("dragover", e => e.preventDefault());
document.getElementById("target").addEventListener("drop", e => {
  e.preventDefault();
  document.getElementById("target").textContent = "Dropped! " + e.dataTransfer.getData("text/plain");
});
</script>