The ondragover event dictates where the dragged data can be dropped.
By default, elements do not accept drops from other elements. To enable dropping, we need to prevent the default behavior of the element.
This is achieved by invoking the event.preventDefault() method within the ondragover event handler:
| event.preventDefault() |
When the dragged data is dropped, a drop event is triggered.
In the example provided, the ondrop attribute invokes a function named drop(event):
| function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData(“text”); ev.target.appendChild(document.getElementById(data)); } |
Here’s the code explained:
preventDefault() to stop the browser from handling the data with its default action (typically opening as a link on drop).dataTransfer.getData() method, which returns data set with the same type in the setData() method.