Some HTML attributes allow a short list of values rather than any free-form text. The draggable attribute is one of them. Choosing the right value helps the browser know how to handle your content.
Available values
| Value | Meaning |
|---|---|
true | Allow native drag initiation |
false | Prevent native dragging |
auto | Use default element behavior |
A page example
<div draggable="true" id="move-card">Drag this card.</div>
<img src="star.png" alt="Star icon" draggable="false">What each choice changes
Read the HTML one element at a time. Find the draggable value and compare it with the table. These are behavior or presentation hints, not ordinary words displayed on the page.
Dragging alone does not move or persist an item. Build drop handling and a keyboard alternative with JavaScript.
How to choose
Choose the simplest value that matches what your page needs. Test in a current browser, and consider keyboard use and accessibility if this attribute affects what users can reach or edit.
Practice
Copy the example and try another allowed value. After each change, refresh the page and inspect both what is visible and what is available to keyboard and screen-reader users.
Common Beginner Mistakes
- Dragging alone does not move or persist an item. Build drop handling and a keyboard alternative with JavaScript.
- Making up an attribute value and assuming the browser understands it.
- Confusing visible formatting with a control that genuinely changes behavior.
Key Takeaways
draggablesupports the documented values shown above.- Dragging alone does not move or persist an item. Build drop handling and a keyboard alternative with JavaScript.
- Test the result in the browser rather than judging only from the source.