body {

  /* Prevent the user selecting text in the example */

  user-select: none;

}

​

#draggable {

  text-align: center;

  background: white;

}

​

.dropzone {

  width: 200px;

  height: 20px;

  background: blueviolet;

  margin: 10px;

  padding: 10px;

}

​

let dragged = null;

​

document.addEventListener("dragstart", (event) => {

  // store a ref. on the dragged elem

  dragged = event.target;

});

​

document.addEventListener("dragover", (event) => {

  // prevent default to allow drop

  event.preventDefault();

});

​

document.addEventListener("drop", (event) => {

  // prevent default action (open as link for some elements)

  event.preventDefault();

  // move dragged element to the selected drop target

  if (event.target.className == "dropzone") {

    dragged.parentNode.removeChild(dragged);

    event.target.appendChild(dragged);

  }

});

​