HTML ondrag Event Attribute
Example
Execute a JavaScript when a <p> element is being dragged:
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
Try it yourself »
Definition and Usage
The ondrag attribute fires when an element or text selection is being dragged.
Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, see our HTML Tutorial on HTML5 Drag and Drop.
Note: To make an element draggable, use the global HTML5 draggable attribute.
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
Note: While dragging an element, the ondrag event fires every 350 milliseconds.
Browser Support
The numbers in the table specify the first browser version that fully supports the event attribute.
| Event Attribute | |||||
|---|---|---|---|---|---|
| ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Differences Between HTML 4.01 and HTML5
The ondrag attribute is new in HTML5.
Syntax
<element ondrag="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on ondrag |
Technical Details
| Supported HTML tags: | ALL HTML elements |
|---|
Related Pages
HTML Tutorial: HTML5 Drag and Drop
HTML Reference: HTML draggable Attribute
HTML DOM Reference: ondrag Event
HTML Event Attributes
