HTML draggable Attribute

HTML draggable Attribute

The HTML draggable global attribute specifies whether an element can be dragged using the browser's drag-and-drop features. It accepts the values true and false; when the attribute is omitted, the browser uses the element's default dragging behavior.

Syntax

The draggable attribute is assigned either true or false.

<div draggable="true">Drag this element</div>

Unlike a Boolean attribute, draggable requires a value when it is explicitly specified.

Attribute Values

The draggable attribute is an enumerated attribute.

If the attribute is omitted or has an invalid value, its default state applies and whether the element is draggable depends on the browser's default behavior for that element.

Global Attribute

The draggable attribute is a global attribute, so it can be specified on HTML elements.

<p draggable="true">This paragraph can be dragged.</p>

<img src="photo.jpg" alt="Example" draggable="false">

Whether dragging has a useful effect depends on the element and any drag-and-drop behavior provided by the page.

The true Value

Setting draggable="true" makes an element draggable.

<div draggable="true">Drag Me</div>

A dragstart event is fired when the user begins dragging the element. JavaScript can respond to this event and place information in the drag data store.

The false Value

Setting draggable="false" prevents the element from participating in the browser's normal drag operation.

<img src="photo.jpg" alt="Example" draggable="false">

This is useful for elements such as images and links that browsers may otherwise allow users to drag by default.

Default Behavior

When draggable is omitted, the browser determines whether an element is draggable according to its default behavior. Text selections, images, and links can normally participate in native dragging behavior, while most other elements are not draggable by default.

For an element that is not normally draggable, use draggable="true" when you want it to participate in a drag-and-drop interaction.

Drag and Drop

The draggable attribute identifies an element as draggable, but a complete custom drag-and-drop interaction normally also uses drag events and JavaScript.

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

Common drag-and-drop events include dragstart, drag, dragenter, dragover, dragleave, drop, and dragend.

For a drop target to accept a dragged item, JavaScript typically handles the relevant drag events and calls preventDefault() during dragover.

Common Mistakes

Do not treat draggable as a Boolean attribute. Writing only draggable does not mean the same thing as draggable="true"; explicitly use true or false.

Do not assume that draggable="true" creates a complete drag-and-drop interface. JavaScript is generally needed to define what data is being dragged and what should happen when it is dropped.

Do not assume every element is non-draggable when the attribute is omitted. Some content, particularly images, links, and selected text, has native dragging behavior.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The draggable global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the draggable Attribute

The example lets you drag an element into a drop area to demonstrate how draggable="true" works with drag-and-drop events.

Summary

The HTML draggable global attribute controls whether an element can participate in a drag operation. Use draggable="true" to make an element draggable and draggable="false" to prevent native dragging. When the attribute is omitted, the browser uses the element's default dragging behavior. Custom drag-and-drop interactions generally require JavaScript to handle drag events and transferred data.