HTML & CSS reference

draggable

Allows or forbids dragging an element with the mouse.

Syntax

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

Parameters

Parameter	Type	Description
draggable	true \| false	Whether the element can be dragged.

Examples

Drag the card into the box:

<p id="card" draggable="true" ondragstart="event.dataTransfer.setData('text', 'card')"
   style="display: inline-block; padding: 8px; background: lightblue; cursor: grab;">Drag me</p>
 
<div ondragover="event.preventDefault()" ondrop="this.append(card)"
     style="min-height: 60px; border: 2px dashed gray; padding: 8px;">Drop here</div>

Preventing an image from being dragged:

<img src="/media/photo-200x200.jpg" alt="Coffee beans" width="100" draggable="false">

Notes

Links and images are draggable by default; other elements only with draggable="true". The attribute only allows a drag to start; where the element can be dropped and what happens then is handled in JavaScript with the dragstart, dragover and drop events. This mechanism barely works on touch screens.

In the tutorial

Attributes — How HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.

Thanks for reading!