dragend

16 March, 2023

Contributors

Milsaware

@milsaware

About

The dragend event is a drag-and-drop event in HTML that is fired when a draggable element or text selection has been dragged to a valid drop target and the drag operation is complete. This event is the final event in the drag-and-drop process and is fired on the element being dragged.

The dragend event is useful for performing any necessary cleanup or resetting any drag-and-drop related state after a drag operation has completed. For example, you might use this event to remove any visual feedback that was added during the drag operation, or to update the UI to reflect the new state of the dragged element.

The dragend event is also fired if the drag operation is cancelled, either by pressing the Escape key or by navigating away from the page before dropping the dragged element.

Event listener

You can listen for the dragend event using the addEventListener() method, like this:

HTML

<div id="drag-me" draggable="true">Drag Me!</div>

JavaScript

const dragMe = document.getElementById("drag-me");

dragMe.addEventListener("dragend", function(event) {
    dragMe.innerHTML = "Dropped!";
    dragMe.style.backgroundColor = "green";
});

Here, we have a <div> element with an ID of "drag-me" that is draggable using the draggable attribute. We then use JavaScript to listen for the dragend event on this element, and update the element's text and background colour when the drag operation is complete.

When the user starts dragging the element, the browser will automatically change the mouse cursor to indicate that the element is being dragged. When the user drops the element onto a valid drop target, the dragend event is fired, and the event listener updates the element's text to "Dropped!" and changes its background colour to green.

Note that this is just a simple example, and you can use the dragend event to perform any necessary clean-up or update any state related to the drag-and-drop operation.

Property

You can also assign a function directly to the ondragend property of an element:

const myDiv = document.getElementById("myDiv");
myDiv.ondragend = function() {
    console.log("Drag operation finished");
};

Here, the function that logs a message to the console is assigned directly to the ondragend property of the myDiv element. When the dragend event occurs, the function will be called.

Inline

You can use the dragend event inline in HTML using the ondragend attribute:

HTML

<div draggable="true" ondragend="myFunction()">Drag me!</div>

JavaScript

function myFunction() {
    console.log("Drag operation finished");
}

Here, the ondragend property is set to call the myFunction function when the drag operation on the div element is finished. The myFunction function logs a message to the console when it is called.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

There is no dragend() method that you can call programmatically. The dragend event is fired automatically by the browser when a drag-and-drop operation is completed by the user, so you cannot trigger it programmatically.

However, you can simulate a drag-and-drop operation programmatically using the dragstart, dragenter, dragover, drop, and dragend events in combination with the dispatchEvent() method. Here's an example of how to simulate a drag-and-drop operation programmatically:

const draggable = document.getElementById("myDraggableElement");
const dropTarget = document.getElementById("myDropTargetElement");

// Simulate a drag-and-drop operation programmatically
const dragStartEvent = new Event("dragstart");
draggable.dispatchEvent(dragStartEvent);

const dragEnterEvent = new Event("dragenter");
dropTarget.dispatchEvent(dragEnterEvent);

const dragOverEvent = new Event("dragover");
dropTarget.dispatchEvent(dragOverEvent);

const dropEvent = new Event("drop");
dropTarget.dispatchEvent(dropEvent);

const dragEndEvent = new Event("dragend");
draggable.dispatchEvent(dragEndEvent);

Here, we simulate a drag-and-drop operation by first getting references to the draggable and drop target elements using getElementById(). We then create instances of the Event object for the dragstart, dragenter, dragover, drop, and dragend events, and dispatch them on the appropriate elements using the dispatchEvent() method.

Note that simulating drag-and-drop operations programmatically can be a complex task, and may not be suitable for all use cases. In general, it's best to rely on user-initiated drag-and-drop operations whenever possible.

javascript

draganddrop