ondrop
Event
Example
Execute JavaScript when a draggable element is dropped inside a <div>
element:
More examples are available at the bottom of this page.
Definition and Usage
The ondrop event is triggered when a draggable element or selected text is dropped on a drop target.
Drag and drop is a very common feature in HTML5. For more information, see HTML5 Drag and Drop in our HTML tutorial.
Note: To make an element draggable, you need to use the HTML5 draggable attribute.
Tip: Links and images are draggable by default and do not require the draggable attribute.
The following events are triggered during the drag and drop process:
Events triggered on the drag target (source element):
- ondragstart - Triggered when the user starts dragging the element
- ondrag - Triggered while the element is being dragged
- ondragend - Triggered when the user finishes dragging the element
Events triggered on the drop target:
- ondragenter - Triggered when the dragged object enters its container
- ondragover - Triggered when the dragged object is dragged over another container
- ondragleave - Triggered when the dragged object leaves its container
- ondrop - Triggered when the mouse button is released during a drag operation
Browser Support
Note: The ondragover event is triggered every 350 milliseconds during a drag operation.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
In HTML:
In JavaScript:
In JavaScript, using the addEventListener() method:
Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.
Bubbles: | Yes |
---|---|
Cancelable: | Yes |
Event type: | DragEvent |
Supported HTML tags: | All HTML elements |
More Examples
Example
The following example demonstrates all drag and drop events:
Related Pages
HTML Tutorial: HTML5 Drag and Drop
HTML Reference: HTML draggable Attribute