Document: dragend event

The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

Bubbles Yes
Cancelable No
Default action Varies
Interface DragEvent
Event handler property ondragend

Examples

Resetting opacity on drag end

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.

We make the element half-transparent while it is being dragged, and listen for the dragend event to reset the element's opacity when it is released.

For a more complete example of drag and drop, see the page for the drag event.

HTML

<div id="container">
  <div id="draggable" draggable="true">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>

CSS

body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: .5;
}

JavaScript

document.addEventListener("dragstart", event => {
  // make it half transparent
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", event => {
  // reset the transparency
  event.target.classList.remove("dragging");
});

Result

Specifications

Specification
HTML Standard
# event-dnd-dragend

Browser compatibility

BCD tables only load in the browser

See also