draggable Attribute and dragstart Event
Make elements draggable and respond to dragstart.
The draggable Attribute
Any element becomes a drag source when you set draggable="true". Links and images are draggable by default; everything else (divs, lis, spans) requires the explicit attribute. draggable="false" opts an element out of native dragging.
<div draggable="true" id="card">Drag me</div>The dragstart Event
When the user begins a drag, the source element fires dragstart. This is where you initialize the drag: record which item is moving, optionally style it, and write data to the dataTransfer object that the drop target will read.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});All lessons in this course
- draggable Attribute and dragstart Event
- dragover and drop Events
- dataTransfer Object
- Practical Drag-to-Reorder List