Home >Web >HTML reference – elements and attributes >draggable – drag and drop (attribute)

draggable – drag and drop (attribute)

<element draggable="true">

Allows or prevents dragging an element with the mouse. The attribute only starts the dragging – what should happen after dropping (moving an item, uploading a file) is handled by a script via the dragstart, dragover and drop events. Images and links are draggable by themselves.

Values

true – the element can be dragged.
false – it cannot (for example an image that should not be dragged into another window).
Without the attribute, the default behavior: images, links with href and selected text yes, everything else no.

Applies to: all elements
In JavaScript: element.draggable

Examples

Dragging an item into the cart:

<p draggable="true" id="roll">Bread roll</p>
<div id="cart">Cart – drag products here</div>
<script>
  document.getElementById('roll').addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text/plain', this.id);
  });
  var cart = document.getElementById('cart');
  cart.addEventListener('dragover', function (e) { e.preventDefault(); });
  cart.addEventListener('drop', function (e) {
    e.preventDefault();
    cart.textContent = 'In the cart: ' + e.dataTransfer.getData('text/plain');
  });
</script>

Accessibility

Keyboard users and many people with motor impairments cannot drag with a mouse. Every action that can be done by dragging must also be possible another way – with an “Add to cart” or “Move up” button.

Things to watch out for

Without e.preventDefault() in the dragover event, the drop target does not accept the drop.
On touch devices drag and drop behaves differently from the mouse; reordering items on phones is usually done with libraries that have their own controls.

Browser support

Works in all major browsers (web-features does not rate it for Baseline). Since version: Chrome 4, Firefox 2, Safari 5. As of October 2026 (MDN browser-compat-data).