Source Code: (back to article)

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>

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>