<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>