How to Do the Drop - ondrop - HTML Drag and Drop API

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

Example of Doing the Drop - ondrop

index.html

Example: HTML

<script>
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

Output should be:

Code explained: (Doing the Drop - ondrop)

Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element

Category:	Web Tutorial
Sub Category:	HTML Drag and Drop API
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference