draggable
The draggable global attribute indicates whether an element can be dragged with the native drag-and-drop API.
Syntax
draggable="true"Examples
<div draggable="true" id="card">Drag me</div>
<script>
card.addEventListener('dragstart', e =>
e.dataTransfer.setData('text/plain', 'card'));
</script>
Output
Renders a draggable card that sets transfer data when the user starts dragging it.
Notes
Must be explicitly "true" or "false" (it does not inherit). Implement dragstart, dragover (with preventDefault), and drop handlers. Native drag-and-drop has limited touch and accessibility support; provide keyboard alternatives.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 3.5 |
| safari | 6.0 |
| edge | 12 |