Easy Tutorial
❮ Prop Style Flexflow Prop Script Charset ❯

ondragstart Event

Event Object

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:


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

❮ Prop Style Flexflow Prop Script Charset ❯