Content · Web Development · HTML

HTML draggable Global Attribute: Reference and Examples

A clear, practical global reference to draggable. Learn when to use it, see working HTML, and avoid common mistakes.

1 views Published Oct 19, 2026 Updated Oct 19, 2026 Admin

Some HTML attributes belong to one particular tag. A global attribute can be written on many different HTML elements. draggable is one of them, and it helps with controls whether a draggable element can be dragged by the browser.

What draggable changes


Controls whether a draggable element can be dragged by the browser. You attach it to an opening HTML tag, usually beside other attributes.

Global does not mean the browser handles it identically on every element. Its usefulness still depends on the element, surrounding markup, accessibility requirements, and browser support.

Example in a real page


<section>
    <div draggable="true">Drag this card</div>
</section>

What to notice


Find draggable in the opening tag. Its position among other attributes does not change its meaning; the name and value (or mere presence, for boolean attributes) are what matter.

Complete drag-and-drop behavior still needs event handling and a keyboard alternative.

Using it in your projects


Start with the simplest HTML that works. Add this attribute when your page actually needs controls whether a draggable element can be dragged by the browser. If changing the attribute does not visibly change the page, inspect how the browser or accessibility tree uses it rather than assuming the code failed.

For example, an attribute may give information to keyboard users, screen readers, a JavaScript component, or a stylesheet without changing the appearance of text.

Mini exercise


Copy the example into a test page. Remove draggable, check the result, then restore it. Describe exactly what changed—and what stayed the same.

Common Beginner Mistakes


  • Complete drag-and-drop behavior still needs event handling and a keyboard alternative.
  • Assuming every global attribute is appropriate on every tag without checking the context.
  • Using a browser hint as if it enforces security or saves data automatically.

Key Takeaways


  • draggable: Controls whether a draggable element can be dragged by the browser.
  • Complete drag-and-drop behavior still needs event handling and a keyboard alternative.
  • Prefer clear native HTML, and test features that depend on browser support.
Share this resourceSend this page to someone who may find it useful.