W3cubDocs

/DOM Events

dragend

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

General info

Bubbles Yes
Cancelable No
Target objects Document, Element
Interface DragEvent
Default Action Varies.

Properties

Property Type Description
target Read only EventTarget The element where dropped.
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not
view Read only WindowProxy document.defaultView (window of the document)
detail Read only long (float) 0.
dataTransfer DataTransfer The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget Read only EventTarget The node that had the dragend event listener attached.
relatedTarget Read only EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX Read only long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Read only long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Read only long

0

use clientX of drop event .

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=505521

clientY Read only long 0
button Read only unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons Read only unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure Read only float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey Read only boolean true if the control key was down when the event was fired. false otherwise.
shiftKey Read only boolean true if the shift key was down when the event was fired. false otherwise.
altKey Read only boolean true if the alt key was down when the event was fired. false otherwise.
metaKey Read only boolean true if the meta key was down when the event was fired. false otherwise.

Example

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
</style>

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);
</script>

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4[2] (Yes) 3.5 (1.9.1)[1] 10 12 3.1
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support (Yes) No support No support 10 No support No support

[1] In Gecko, dragend is not dispatched if the source node is moved or removed during the drag (e.g. on drop or dragover). See bug 460801.

[2] In Blink (Chrome), dragend is not dispatched if an iframe (not necessarily the source target) is involved in a DOM operation. See bug 737691.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/Events/dragend