Definition and Usage
The ondrop attribute fires when a draggable element or text selection is dropped on a valid drop target.
To learn about Drag and Drop, read our HTML Tutorial on HTML5 Drag and Drop.
Tip: Links and images are draggable by default, and do not need the draggable attribute.
There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:
- Events fired on the draggable target (the source element):
- ondragstart - fires when the user starts to drag an element
- ondrag - fires when an element is being dragged
- ondragend - fires when the user has finished dragging the element
- Events fired on the drop target:
- ondragenter - fires when the dragged element enters the drop target
- ondragover - fires when the dragged element is over the drop target
- ondragleave - fires when the dragged element leaves the drop target
- ondrop - fires when the dragged element is dropped on the drop target
Applies to
The ondrop attribute is part of the Event Attributes, and can be used on any HTML elements.
| Elements | Event |
|---|---|
| All HTML elements | ondrop |
Example
Div Example
Execute a JavaScript when a draggable element is dropped in a <div> element:
<div ondrop="myFunction(event)"></div>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the event attribute.
| Event Attribute | |||||
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |