References

Beginner-friendly references for web development, with live, editable examples.

The HTML draggable attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML draggable attribute specifies whether an element can be dragged using the native Drag and Drop API. Set draggable="true" or "false". It is a global attribute; to make dragging actually do something you also need dragstart, dragover and drop event handlers.

Overview

The draggable attribute marks an element as draggable for the browser's native drag-and-drop. Links and images are draggable by default; for anything else set draggable="true".

Marking an element draggable is only the first step. You attach the data to drag in a dragstart handler (via event.dataTransfer), allow dropping by calling preventDefault() in dragover, and handle the result in a drop handler. Note that native drag-and-drop is not designed for touch screens, and it is not keyboard-accessible — always provide an alternative way to perform the same action.

Syntax

<div draggable="true">Drag me</div>

Values

Value
true | false

Example

Live example 
<p draggable="true" style="display:inline-block; padding:8px 12px; background:#eef5ff; border-radius:6px; cursor:grab;">Drag me around</p>

Best practices

  • Pair draggable="true" with dragstart, dragover and drop handlers — the attribute alone does nothing useful.
  • Always provide a keyboard- and click-based alternative, because drag-and-drop is not keyboard accessible.
  • Set the payload with event.dataTransfer.setData() in dragstart.
  • For mobile support, consider Pointer Events rather than the native drag API.

Accessibility

Native drag-and-drop is not keyboard accessible and is awkward for many users, so an interface that only works by dragging excludes people. Whenever you make something draggable, also offer the same outcome through buttons, a menu, or keyboard controls.

Frequently asked questions

What does the draggable attribute do?
It tells the browser an element can be dragged with the native Drag and Drop API.
How do I make a dragged element actually do something?
Handle the dragstart, dragover (call preventDefault()) and drop events, passing data through event.dataTransfer.
Does draggable work on touch screens?
Native drag-and-drop has limited touch support; for mobile, build interactions with Pointer Events instead.
Which elements are draggable by default?
Links (<a> with href) and images are draggable without the attribute.
dir (attr) enterkeyhint