HTML · Interactive Elements

Draggable Attribute

Make elements draggable with HTML5 Drag and Drop API

Find videos you like?

Save to resource drawer for future reference!

What is Draggable?

Enable drag and drop interactions

The draggable attribute makes any HTML element draggable. Combined with JavaScript event listeners, you can create powerful drag-and-drop interfaces.

👆

Click & Hold

🖱️

Move Element

📍

Drop Target

Syntax

draggable="true" enables dragging,draggable="false" disables it

Drag Event Flow

Sequence of events during drag operation

Drag Lifecycle

Understanding the drag event sequence

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag Event Flow</title>
  </head>
  <body>
    <div class="drag-flow">
      <div class="step">
        <div class="num">1</div>
        <div class="label">dragstart</div>
        <div class="desc">User starts dragging</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">2</div>
        <div class="label">drag</div>
        <div class="desc">Element is being dragged</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">3</div>
        <div class="label">dragover</div>
        <div class="desc">Dragged over drop zone</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">4</div>
        <div class="label">drop</div>
        <div class="desc">Released in drop zone</div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Basic Draggable

Making elements draggable

Simple Draggable Elements

Try dragging the boxes around

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Draggable</title>
  </head>
  <body>
    <h1>Drag These Elements</h1>
    <div class="items">
      <div class="box" draggable="true">📦 Draggable Box</div>
      <div class="box" draggable="true">🎁 Draggable Gift</div>
      <div class="box" draggable="false">🔒 Not Draggable</div>
    </div>
    <p class="note">Try dragging the boxes!</p>
  </body>
</html>

Live Preview

Loading preview...

Note: Links and images are draggable by default. Use draggable="false" to prevent dragging.

Drag and Drop

Complete drag and drop implementation

Drag Items to Drop Zone

Full drag and drop with event handlers

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop</title>
  </head>
  <body>
    <h1>Drag Items to Drop Zone</h1>
    <div class="source">
      <div class="item" draggable="true" id="item1">🍎 Apple</div>
      <div class="item" draggable="true" id="item2">🍌 Banana</div>
      <div class="item" draggable="true" id="item3">🍊 Orange</div>
    </div>
    <div class="dropzone" id="dropzone">
      Drop items here
    </div>
  </body>
</html>

Live Preview

Loading preview...

Key Events

dragstart: Store data | dragover: Prevent default to allow drop | drop: Handle dropped element

Sortable List

Reorder items by dragging

Drag to Reorder

Interactive sortable task list

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable List</title>
  </head>
  <body>
    <h1>Drag to Reorder Tasks</h1>
    <ul class="task-list" id="tasks">
      <li draggable="true">✅ Learn HTML</li>
      <li draggable="true">📝 Practice CSS</li>
      <li draggable="true">⚡ Master JavaScript</li>
      <li draggable="true">🚀 Build Projects</li>
    </ul>
  </body>
</html>

Live Preview

Loading preview...

Drag Events Reference

Complete list of drag and drop events

dragstartDragged element

User starts dragging an element

dragDragged element

Element is being dragged

dragendDragged element

Drag operation ends

dragenterDrop zone

Dragged element enters drop zone

dragoverDrop zone

Dragged element is over drop zone

dragleaveDrop zone

Dragged element leaves drop zone

dropDrop zone

Element is dropped

Best Practices

✅ Do

• Provide visual feedback (opacity, cursors)
• Use e.preventDefault() in dragover
• Clear drop zone highlights on drop
• Add user-select: none to draggables

❌ Avoid

• Making text content draggable
• Forgetting preventDefault in dragover
• No visual feedback during drag
• Dragging without cursor: move

Previous Topic

Data Attributes

data-* attributes for storing custom data in HTML elements.

Next Topic

Iframe Element

Ask a Question

Have a question about Draggable? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Interactive Elements

Draggable Attribute

Make elements draggable with HTML5 Drag and Drop API

Find videos you like?

Save to resource drawer for future reference!

What is Draggable?

Enable drag and drop interactions

The draggable attribute makes any HTML element draggable. Combined with JavaScript event listeners, you can create powerful drag-and-drop interfaces.

👆

Click & Hold

🖱️

Move Element

📍

Drop Target

Syntax

draggable="true" enables dragging,draggable="false" disables it

Drag Event Flow

Sequence of events during drag operation

Drag Lifecycle

Understanding the drag event sequence

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag Event Flow</title>
  </head>
  <body>
    <div class="drag-flow">
      <div class="step">
        <div class="num">1</div>
        <div class="label">dragstart</div>
        <div class="desc">User starts dragging</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">2</div>
        <div class="label">drag</div>
        <div class="desc">Element is being dragged</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">3</div>
        <div class="label">dragover</div>
        <div class="desc">Dragged over drop zone</div>
      </div>
      <div class="arrow">→</div>
      <div class="step">
        <div class="num">4</div>
        <div class="label">drop</div>
        <div class="desc">Released in drop zone</div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Basic Draggable

Making elements draggable

Simple Draggable Elements

Try dragging the boxes around

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Draggable</title>
  </head>
  <body>
    <h1>Drag These Elements</h1>
    <div class="items">
      <div class="box" draggable="true">📦 Draggable Box</div>
      <div class="box" draggable="true">🎁 Draggable Gift</div>
      <div class="box" draggable="false">🔒 Not Draggable</div>
    </div>
    <p class="note">Try dragging the boxes!</p>
  </body>
</html>

Live Preview

Loading preview...

Note: Links and images are draggable by default. Use draggable="false" to prevent dragging.

Drag and Drop

Complete drag and drop implementation

Drag Items to Drop Zone

Full drag and drop with event handlers

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop</title>
  </head>
  <body>
    <h1>Drag Items to Drop Zone</h1>
    <div class="source">
      <div class="item" draggable="true" id="item1">🍎 Apple</div>
      <div class="item" draggable="true" id="item2">🍌 Banana</div>
      <div class="item" draggable="true" id="item3">🍊 Orange</div>
    </div>
    <div class="dropzone" id="dropzone">
      Drop items here
    </div>
  </body>
</html>

Live Preview

Loading preview...

Key Events

dragstart: Store data | dragover: Prevent default to allow drop | drop: Handle dropped element

Sortable List

Reorder items by dragging

Drag to Reorder

Interactive sortable task list

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable List</title>
  </head>
  <body>
    <h1>Drag to Reorder Tasks</h1>
    <ul class="task-list" id="tasks">
      <li draggable="true">✅ Learn HTML</li>
      <li draggable="true">📝 Practice CSS</li>
      <li draggable="true">⚡ Master JavaScript</li>
      <li draggable="true">🚀 Build Projects</li>
    </ul>
  </body>
</html>

Live Preview

Loading preview...

Drag Events Reference

Complete list of drag and drop events

dragstartDragged element

User starts dragging an element

dragDragged element

Element is being dragged

dragendDragged element

Drag operation ends

dragenterDrop zone

Dragged element enters drop zone

dragoverDrop zone

Dragged element is over drop zone

dragleaveDrop zone

Dragged element leaves drop zone

dropDrop zone

Element is dropped

Best Practices

✅ Do

• Provide visual feedback (opacity, cursors)
• Use e.preventDefault() in dragover
• Clear drop zone highlights on drop
• Add user-select: none to draggables

❌ Avoid

• Making text content draggable
• Forgetting preventDefault in dragover
• No visual feedback during drag
• Dragging without cursor: move

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Data Attributes

Iframe Element

HTML Code Editor

Building Your Learning Module...

Draggable Attribute

Syntax

Drag Lifecycle

Simple Draggable Elements

Drag Items to Drop Zone

Key Events

Drag to Reorder

✅ Do

❌ Avoid

Data Attributes

Iframe Element

HTML Code Editor

Draggable Attribute

Syntax

Drag Lifecycle

Simple Draggable Elements

Drag Items to Drop Zone

Key Events

Drag to Reorder

✅ Do

❌ Avoid