YouTip` element:
Drag me!
[Try it yourself »](#) More examples are provided at the bottom of this article. * * * ## Definition and Usage The `ondragend` event is triggered when the user finishes dragging an element or selected text. Drag and drop is a very common feature in HTML5. For more information, see (#) in our HTML tutorial. **Note:** To make an element draggable, you must use the HTML5 (#) attribute. **Tip:** Links and images are draggable by default and do not require the `draggable` attribute. The following events are fired during drag-and-drop operations: * **Events triggered on the drag source (the original element)**: — triggered when the user starts dragging an element — triggered while an element is being dragged * ondragend — triggered after the user finishes dragging an element * **Events triggered upon reaching the drop target**: — triggered when a dragged object enters the boundary of its container — triggered when a dragged object is moved over the boundary of another container — triggered when a dragged object leaves the boundary of its container — triggered 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: (#) In JavaScript: _object_.ondragend=function(){_myScript_};(#) In JavaScript, using the `addEventListener()` method: _object_.addEventListener("dragend", _myScript_);(#) **Note:** The [addEventListener()](#) method is not supported in Internet Explorer 8 and earlier versions. * * * Technical Details | Bubbles: | Yes | | --- | --- | | Cancelable: | No | | Event Interface: | DragEvent | | Supported HTML Tags: | All HTML elements | * * *  ## More Examples ## Example The following example demonstrates all drag-and-drop events: /* Triggered during dragging */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() 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 = "Starting to drag the p element."; // Change the opacity of the dragged element event.target.style.opacity = "0.4"; }); // Change the color of the output text while dragging the p element document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Output some text and reset opacity after dragging the p element document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the p element"; event.target.style.opacity = "1"; }); /* Triggered after dragging completes */ // When the p element 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 into other elements. For drop, we must prevent the 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 handling of data (e.g., opening links by default in drop) Reset the output text color and the div's border color Use dataTransfer.getData() to retrieve the dragged data The dragged data is the element's 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 »](#) * * * ## Related Pages HTML Tutorial: (#) HTML Reference: (#) [ Event Object](#)