dragstart

The dragstart event is fired when the user starts dragging an element or text selection.

General info

Bubbles	Yes
Cancelable	Yes
Target objects	`Document`, `Element`
Interface	`DragEvent`
Default Action	Initiate the drag-and-drop operation.

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The element that will be dragged.
`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 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：dropzone

HTML Content

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

CSS Content

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

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

JavaScript Content

  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);

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of 'dragstart' in that specification.	Living Standard
HTML5.1 The definition of 'dragstart' in that specification.	Working Draft	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	4	3.5 (1.9.1)	10	12	3.1

Feature	Android	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile
Basic support	Not supported	Not supported	Not supported	Not supported	Not supported	10	Not supported	Not supported

dragstart

General info

Properties

Example：dropzone

HTML Content

CSS Content

JavaScript Content

Specifications

Browser compatibility

See also

Document Tags and Contributors