The dragstart
event is fired when the user starts dragging an element or text selection.
The dragstart
event is fired when the user starts dragging an element or text selection.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("dragstart", (event) => {}); ondragstart = (event) => {};
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.
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.
html
<div id="container"> <div id="draggable" draggable="true">This div is draggable</div> </div> <div class="dropzone"></div>
css
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: 0.5; }
js
const source = document.getElementById("draggable"); source.addEventListener("dragstart", (event) => { // make it half transparent event.target.classList.add("dragging"); }); source.addEventListener("dragend", (event) => { // reset the transparency event.target.classList.remove("dragging"); });
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
dragstart_event |
1 | 12 | 9 | 9 | 12 | 3.1 | 4.4 | 18 | 9 | 12 | 2 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event