HTML ondragleave Event Attribute

Example

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

Definition and Usage

The ondragleave attribute fires when a draggable element or text selection leaves a valid drop target.

The ondragenter and ondragleave events can help the user to understand that a draggable element is about to enter or leave a drop target. This can be done by, for example, setting a background color when the draggable element enters the drop target, and removing the color when the element is moved out of the target.

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