Document: dragstart event

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

Bubbles Yes
Cancelable Yes
Default action Initiate the drag-and-drop operation.
Interface DragEvent
Event handler property ondragstart


Setting opacity on drag start

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.

We listen for the dragstart event to make the element half transparent while it is being dragged.

For a more complete example of drag and drop, see the page for the drag event.


<div id="container">
  <div id="draggable" draggable="true">
    This div is draggable
<div class="dropzone"></div>


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;


document.addEventListener("dragstart", event => {
  // make it half transparent"dragging");

document.addEventListener("dragend", event => {
  // reset the transparency"dragging");



HTML Standard
# event-dnd-dragstart

Browser compatibility

BCD tables only load in the browser

See also