Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #text { cursor: pointer; cursor: pointer; width: 40px; height: 40px; } .droppable { background-color: white; border: 1px solid black; padding: 10px; } .droppable.drag-over { background-color: lightblue; } .droppable.dropped { background-color: lightgreen; } </style> </head> <body> <div id="draggable1" class="draggable" draggable="true"> Drag me! </div> <div id="droppable1" class="droppable"> Drop here! </div> <script> var draggables = document.getElementsByClassName("draggable"); for (var i = 0; i < draggables.length; i++) { draggables[i].addEventListener("dragstart", function (event) { event.dataTransfer.setData("text", event.target.id); }); } var droppables = document.getElementsByClassName("droppable"); for (var i = 0; i < droppables.length; i++) { droppables[i].addEventListener("dragover", function (event) { event.preventDefault(); event.target.classList.add("drag-over"); }); droppables[i].addEventListener("dragleave", function (event) { event.target.classList.remove("drag-over"); }); droppables[i].addEventListener("drop", function (event) { var id = event.dataTransfer.getData("text"); var draggableElement = document.getElementById(id); event.target.appendChild(draggableElement); event.target.classList.remove("drag-over"); event.target.classList.add("dropped"); setTimeout(function () { event.target.classList.remove("dropped"); }, 1000); }); } </script> </body> </html>