A global event handler
for the dragend
event.
GlobalEventHandlers.ondragend
Syntax
targetElement.ondragend = dragendHandler;
Return value
-
dragendHandler
-
The dragend event handler for element
targetElement
.
Example
This example demonstrates using the ondragend
global event handler to set an element's dragend
event handler.
HTML
<div> <p id="source" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p> </div> <div id="target">Drop Zone</div> <textarea readonly id="event-log"></textarea> <button id="reload">Reload</button>
CSS
div, #event-log { margin: 1em; } #source, #target { padding: 2em; border: 1px solid black; } #source { color: blue; } #event-log { width: 25rem; height: 4rem; margin-bottom: 0; padding: .2rem; }
JavaScript
const source = document.getElementById("source"); const target = document.getElementById("target"); const event_log = document.getElementById("event-log"); function dragstart_handler(ev) { event_log.textContent += "dragStart\n"; // Change the source element's background color to signify drag has started ev.currentTarget.style.border = "dashed"; ev.dataTransfer.setData("text", ev.target.id); } function dragover_handler(ev) { event_log.textContent += "dragOver\n"; // Change the target element's border to signify a drag over event // has occurred ev.currentTarget.style.background = "lightblue"; ev.preventDefault(); } function drop_handler(ev) { event_log.textContent += "Drop\n"; ev.preventDefault(); const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function dragenter_handler(ev) { event_log.textContent += "dragEnter\n"; // Change the source element's background color for enter events ev.currentTarget.style.background = "yellow"; } function dragleave_handler(ev) { event_log.textContent += "dragLeave\n"; // Change the source element's border back to white ev.currentTarget.style.background = "white"; } function dragend_handler(ev) { event_log.textContent += "dragEnd\n"; // Change the target element's background color to visually indicate // the drag ended. target.style.background = "pink"; } // Set handlers for the source's drag - start/enter/leave/end events source.ondragstart = dragstart_handler; source.ondragenter = dragenter_handler; source.ondragleave = dragleave_handler; source.ondragend = dragend_handler; // Set handlers for the target's drop and dragover events target.ondrop = drop_handler; target.ondragover = dragover_handler; // Set click event listener on button to reload the example const button = document.getElementById("reload"); button.addEventListener("click", () => { document.location.reload(); });
Result
Specifications
Specification |
---|
HTML Standard # ix-handler-ondragend |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
ondragend |
1
|
12
|
9
|
9
|
12
|
3.1
|
1
|
18
|
9
|
12
|
2
|
1.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragend