dragexit

The dragexit event is fired when an element is no longer the drag operation's immediate selection target.

General info

Specification

HTML5

Interface

DragEvent

Bubbles

Yes

Cancelable

No

Target

The previous target element.

Default Action

None.

Properties

Property	Type	Description
target Read only	EventTarget	The element underneath the element being dragged.
type Read only	DOMString	The type of event.
bubbles Read only	boolean	Does the event normally bubble?
cancelable Read only	boolean	Is it possible to cancel the event?
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 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	The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Read only	long	The Y coordinate of the mouse pointer in local (DOM content) coordinates.
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);

  document.addEventListener("dragexit", 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

Specification	Status	Comment
WHATWG HTML Living Standard The definition of 'dragexit' in that specification.	Living Standard
HTML5.1 The definition of 'dragexit' in that specification.	Working Draft	Not included in W3C HTML5 Recommendation

Browser compatibility

Related Events

• drag
• dragstart
• dragend
• dragover
• dragenter
• dragleave
• dragexit
• drop