HTMLElement: 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

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

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

Result

Specifications

No specification found

No specification data found for api.HTMLElement.dragend_event.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

No compatibility data found for api.HTMLElement.dragend_event.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also