Drag and Drop
Home
Snippets
Drag and Drop
HTML
CSS
JS
<body> <div> <div id="dropArea">Drop Here</div> <div id="dragItem" draggable="true">Drag</div> </div> </body>
body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } #dragItem { width: 50px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px; cursor: grab; } #dropArea { width: 100px; height: 100px; border: 2px solid black; margin-top: 10px; margin-bottom: 10px; display: grid; place-items: center; }
document.getElementById("dragItem").addEventListener ("dragstart", function (e) { e.dataTransfer.setData("text", e.target.id); }); document.getElementById("dropArea").addEventListener ("dragover", function (e) { e.preventDefault(); }); document.getElementById("dropArea").addEventListener ("drop", function (e) { e.preventDefault(); const data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); });
Ad #1
Ad #2
Scroll to Top