ondragendEvent

Examples

Execute JavaScript when the user completes dragging a <p> element:

More examples are included at the bottom of this article.

Definition and Usage

The ondragend event fires when the user completes dragging an element or selected text.

Drag and drop is a very common feature in HTML5. For more information, you can check our HTML tutorial onHTML5 Drag and Drop。

Note:To make an element draggable, you need to use the HTML5draggableattribute.

Tip:Links and images are draggable by default and do not need the draggable attribute.

The following events are fired during the drag and drop process:

Events fired on the drag target(source element):
- ondragstart- Fired when the user starts dragging an element
- ondrag- Fired while the element is being dragged
- ondragend - Fired after the user completes dragging the element

Events fired on the drop target:
- ondragenter- Fired when a dragged object enters the range of its container
- ondragover- Fired when a dragged object is dragged within the range of another object's container
- ondragleave- Fired when the dragged object leaves the range of its container
- ondrop- Fired when the mouse button is released during a drag operation

Browser Support

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

Event
ondragend	4.0	9.0	3.5	6.0	12.0

Syntax

In HTML:

<element ondragend="myScript">Try it Yourself

In JavaScript:

object.ondragend=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

object.addEventListener("dragend", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not support theaddEventListener()method.

Technical Details

Bubbles:	Yes
Cancelable:	No
Event type:	DragEvent
Supported HTML tags:	All HTML elements

More Examples

Example

The following example demonstrates all the drag and drop events:

/* Fired when dragging */
document.addEventListener("dragstart", function(event) {
//The dataTransfer.setData() method sets the data type and the dragged data
    event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started dragging the p element.";
//Change the opacity of the dragged element
    event.target.style.opacity = "0.4";
});
//While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// When finished dragging the p element, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Completed dragging the p element";
    event.target.style.opacity = "1";
});
/* Fired after dragging is completed */
// When the p element completes dragging and enters the droptarget, change the div's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// By default, data/elements cannot be dropped in other elements. For drop, we must prevent the element's default handling
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the div's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*For drop, prevent the browser's default data handling (links are opened by default on drop)
Reset the output text color and the DIV's border color
Use the dataTransfer.getData() method to get the dragged data
The dragged data element id ("drag1")
Append the dragged element to the drop element*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});

Try it Yourself »

HTML Tutorial:HTML5 Drag and Drop

HTML Reference:HTML draggable Attribute