Easy Tutorial
❮ Event Type Prop Checkbox Defaultchecked ❯

ondragleave Event

Event Object

Example

Execute JavaScript when a draggable element is moved out of the drop target:

More examples are available at the bottom of this page.


Definition and Usage

The ondragleave event is triggered when a draggable element or selected text leaves the drop target.

The ondragenter and ondragleave events can help users better understand the process of a draggable element entering and leaving the drop area. You can set different background colors when a draggable element enters and leaves the drop area.

Drag and drop is a 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

The numbers in the table specify the first browser version that supports the event.

Event Chrome IE Firefox Safari Opera
ondragleave 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: No
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

❮ Event Type Prop Checkbox Defaultchecked ❯