HTMLElement: drag event
=======================

The `drag` event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.

This event is cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("drag", (event) => {});

ondrag = (event) => {};
```

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag and drop interaction.

Examples
--------

### Drag and drop example

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


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

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

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

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
let dragged;

/\* events fired on the draggable target \*/
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.classList.add("dragging");
});

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

/\* events fired on the drop targets \*/
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // prevent default to allow drop
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged element to the selected drop target
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    event.target.appendChild(dragged);
  }
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `dragstart`
* `dragend`
* `dragover`
* `dragenter`
* `dragleave`
* `drop`