HtmlConceptBeginner · 3 min read

What is draggable attribute in HTML: Simple Explanation and Example

The draggable attribute in HTML makes an element able to be moved by dragging it with a mouse or touch. Setting draggable="true" allows users to click and drag the element, enabling drag-and-drop interactions in web pages.

⚙️

How It Works

The draggable attribute tells the browser if an element can be picked up and moved by the user using a mouse or touch. Think of it like a sticky note on a desk that you can pick up and move to a different spot. When you set draggable="true", the element becomes like that sticky note, ready to be dragged.

Behind the scenes, the browser starts a drag operation when you click and hold the element, then move the mouse. This lets you drag the element to another place or even to another application if supported. If you set draggable="false" or leave it out, the element stays fixed and cannot be dragged.

💻

Example

This example shows a simple box that you can drag around the screen because it has draggable="true". Try clicking and dragging the blue box.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draggable Example</title>
  <style>
    #dragBox {
      width: 150px;
      height: 150px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: grab;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div id="dragBox" draggable="true">Drag me!</div>
</body>
</html>

Output

A blue square box with white text 'Drag me!' that can be clicked and dragged by the user.

🎯

When to Use

Use the draggable attribute when you want users to move elements around on the page. This is helpful for creating interactive features like:

Rearranging items in a list or grid
Dragging files or images to upload
Building custom drag-and-drop interfaces like kanban boards or puzzles

It improves user experience by making the page feel more dynamic and interactive, similar to moving physical objects on a desk.

✅

Key Points

The draggable attribute accepts true, false, or auto.
By default, some elements like images and links are draggable without setting this attribute.
Drag-and-drop requires handling events like dragstart and drop for full control.
Not all browsers support dragging all element types equally, so testing is important.

✅

Key Takeaways

The draggable attribute makes HTML elements movable by mouse or touch.

Set draggable="true" to enable dragging on any element.

Use draggable for interactive features like rearranging or file dragging.

Drag-and-drop needs event handling for full functionality.

Some elements are draggable by default, but others need this attribute.