HTML draggable Attribute

What You’ll Learn

The draggable attribute is a global HTML attribute that controls whether an element can be dragged by the user. Set it to true to make a box, list item, or image a drag source. Pair it with the HTML Drag and Drop API (dragstart, dragover, drop) to build interactive interfaces.

Purpose of draggable

The primary purpose of the draggable attribute is to define whether an element can be picked up and dragged with the mouse or touch (where supported). It is the HTML-side switch that marks an element as a draggable item in the browser’s native drag-and-drop system.

Use it for kanban boards, sortable lists, file upload drop zones, or any UI where users rearrange content. Remember: draggable only enables dragging from the source element. Drop targets need separate event handlers.

📝 Syntax

Add draggable to any element you want the user to drag:

<div class="card" draggable="true">

  Drag me

</div>

Syntax Rules

• Enumerated attribute: true, false, or auto.
• Default is auto for most elements (usually not draggable).
• Use draggable="true" to explicitly enable dragging on divs, spans, and custom widgets.
• Combine with CSS cursor: grab and user-select: none for clearer UX.

💎 Values

The draggable attribute accepts three keyword values:

• true — Element can be dragged by the user.
• false — Element cannot be dragged (explicitly disabled).
• auto — Default. Browser decides; images and links may be draggable in some cases.

<div draggable="true">Draggable</div>

<div draggable="false">Not draggable</div>

<img src="photo.png" draggable="false" alt="Block image drag">

Applicable Elements

draggable + drag events

Examples Gallery

A draggable box, JavaScript toggling, and a simple drop zone with drag events.

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

<div id="dynamicDraggable">Drag me</div>



<script>

  document.getElementById("dynamicDraggable").draggable = true;

</script>

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

<div id="zone">Drop here</div>



<script>

  zone.addEventListener("dragover", e => e.preventDefault());

  zone.addEventListener("drop", e => { e.preventDefault(); zone.appendChild(item); });

</script>

♿ Accessibility

• Do not rely on drag alone — Provide keyboard alternatives (buttons, menus) for reordering or moving items.
• Announce changes — Use live regions when drag-and-drop updates content for screen reader users.
• Clear affordance — Use visible handles or labels so users know what is draggable.
• Focus management — After a drop, ensure focus follows the moved element logically.

💡 Best Practices