draggable

The global draggable attribute specifies whether an element may be dragged with the browser's native drag-and-drop behavior.

Basic example

<button draggable="true" id="card">Move this card</button>

The value must be written as the string true or false. The attribute does not implement the complete interaction: JavaScript drag events and a drop target are still needed for an application-specific action.

Do not confuse it with “all users can move it”

Native dragging is primarily a pointer interaction. It may not be available in the same way to keyboard or touch users, so provide buttons, menus, or keyboard commands that perform the same action without dragging.

Use the right element first

Make the element's meaning clear before adding drag behavior. A button should remain a button, a link should remain a link, and status changes should be announced when an item is moved.

Related pages

• dropzone: understand the obsolete drop attribute
• button: provide an interactive action
• data: connect text with machine-readable values
• HTML reference index