Easy Tutorial
❮ Jsref Tojson Prop Input Time Readonly ❯

ondrop Event

Event Object

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:


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

❮ Jsref Tojson Prop Input Time Readonly ❯