Source Code: (back to article)
<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
</div>
<img id="draggableImage" src="https://via.placeholder.com/150" draggable="true" style="width: 150px; height: 150px;">

<script>
const dragArea = document.getElementById('dragArea');
const draggableImage = document.getElementById('draggableImage');

// Event listener for the drag start
draggableImage.addEventListener('dragstart', function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});

// Event listener for dragging over the drag area
dragArea.addEventListener('dragover', function(event) {
event.preventDefault(); // Necessary to allow the drop
});

// Event listener for drop
dragArea.addEventListener('drop', function(event) {
event.preventDefault(); // Prevent default behavior (like opening as link for some elements)
const data = event.dataTransfer.getData("text");
const image = document.getElementById(data);
dragArea.appendChild(image);
});
</script>