ondragstart
Event
Example
Execute JavaScript when a user starts dragging a <p>
element:
More examples are included at the bottom of this page.
Definition and Usage
The ondragstart event is triggered when the user begins to drag an element or selected text.
Drag and drop is a very common feature in HTML5. For more information, see our HTML5 Drag and Drop in the 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 being 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 the drag operation.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragstart | 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