<!DOCTYPE html> <html> <head> <title>Drag-and-drop test</title> <style> #drop { width: 5em; height: 5em; border: 1px solid black; } </style> </head> <body> <div id="drag" draggable="true">drag me</div> <div id="drop"></div> <script> window.didDragStart = false; window.didDragEnter = false; window.didDragOver = false; window.didDrop = false; const drag = document.getElementById('drag'); const drop = document.getElementById('drop'); drag.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', event.target.id); window.didDragStart = true; }); drop.addEventListener('dragenter', function(event) { event.preventDefault(); window.didDragEnter = true; }); drop.addEventListener('dragover', function(event) { event.preventDefault(); window.didDragOver = true; }); drop.addEventListener('drop', function(event) { event.preventDefault(); const id = event.dataTransfer.getData('id'); const el = document.getElementById(id); if (el) { event.target.appendChild(el); window.didDrop = true; } }); </script> </body> </html>