The HTML ondrop attribute is an event handler that triggers a script to execute when a draggable element or text selection is dropped onto a valid drop target.
Definition and Usage
➔ If the element is not draggable by default, the element must have draggable="true" set to enable dragging.
➔ By default, elements cannot accept drops. To enable or accept dropping, you need to override the browser's default handling behavior.
➔ Enabling dropping is usually done by calling event.preventDefault() within the event handler function on the target elements.
➔ In the ondragstart event you typically use the event.dataTransfer.setData() method to store the data that will be transferred during the drag operation and that data will be available on the drop target.
➔ The ondrop event handler typically uses event.dataTransfer.getData() to retrieve the data transferred during the drag operation and perform actions based on the dropped content.
- ondragstart - This is fired when the user begin to drag an element.
- ondrag - This is fired when an element is being dragged.
- ondragend - This is fired when the user has complete dragging the element.
➔ Events fired on the drop targets where the item can be dropped.
- ondragenter - This is fired when the dragged element enters the drop target.
- ondragover - This is fired when the dragged element is over the drop target.
- ondragleave - This is fired when the dragged element leaves the drop target.
- ondrop - This is fired when the dragged element is dropped on the drop target.
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| ondrop | All visible elements |