HTML · APIs

Drag and Drop API

Create interactive drag-and-drop interfaces with native HTML5

Find videos you like?

Save to resource drawer for future reference!

What is the Drag and Drop API?

A built-in HTML5 API for creating draggable elements and drop zones

The Drag and Drop API enables users to drag elements around the page and drop them into designated areas. It's perfect for file uploads, sortable lists, and interactive interfaces.

Draggable Attribute

Add draggable="true" to any element

DataTransfer

Pass data during drag operations

File Support

Handle file drops for uploads

Basic Drag & Drop

Drag items into a drop zone with visual feedback

Interactive Drag & Drop Demo

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>
    <div class="container">
      <h1>🎯 Drag & Drop Demo</h1>
      <p class="subtitle">Drag the colored boxes into the drop zone below</p>
      <div class="drag-items" id="dragItems">
        <div class="drag-item" draggable="true" data-id="item-1">📦 Item 1</div>
        <div class="drag-item" draggable="true" data-id="item-2">📦 Item 2</div>
        <div class="drag-item" draggable="true" data-id="item-3">📦 Item 3</div>
        <div class="drag-item" draggable="true" data-id="item-4">📦 Item 4</div>
        <div class="drag-item" draggable="true" data-id="item-5">📦 Item 5</div>
        <div class="drag-item" draggable="true" data-id="item-6">📦 Item 6</div>
      </div>
      <div class="drop-zone" id="dropZone">
        <div class="drop-zone-icon">⬇️</div>
        <div class="drop-zone-text">
          <strong>Drop Zone</strong><br>
          Drag items here
        </div>
        <div class="dropped-items" id="droppedItems"></div>
      </div>
      <button class="reset-btn" onclick="resetAll()">🔄 Reset All</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

File Drop Upload

Real-world example: drag and drop files for upload

File Upload with Drag & Drop

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Drop Upload</title>
  </head>
  <body>
    <div class="container">
      <h1>📁 File Drop Upload</h1>
      <p class="subtitle">Drag and drop files here to upload</p>
      <div class="upload-zone" id="uploadZone">
        <div class="upload-icon">☁️</div>
        <div class="upload-text">Drop files here</div>
        <div class="upload-hint">or click to browse</div>
      </div>
      <div class="file-list" id="fileList"></div>
      <input type="file" id="fileInput" multiple style="display: none;">
    </div>
  </body>
</html>

Live Preview

Loading preview...

Drag Events

Key events fired during drag operations

dragstart

Fired when drag begins

dragover

Fired while dragging over drop zone

drop

Fired when item is dropped

dragend

Fired when drag completes

Best Practices

Always call e.preventDefault() in dragover to enable dropping
Provide visual feedback during drag (cursor changes, hover states)
Use dataTransfer to pass data between drag and drop
Set draggable="true" attribute on elements you want to drag
Handle both file drops and element drops if needed

Common Use Cases

File Uploads: Drag & drop files instead of clicking browse
Sortable Lists: Reorder items by dragging (Trello, Kanban boards)
Form Builders: Drag components to build interfaces
Image Galleries: Organize photos by dragging
Dashboard Widgets: Rearrange dashboard layouts

Previous Topic

Geolocation API

Getting user location with navigator.geolocation.

Next Topic

Web Workers

Running JavaScript in background threads for performance.

Ask a Question

Have a question about Drag and Drop API? 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 · APIs

Drag and Drop API

Create interactive drag-and-drop interfaces with native HTML5

Find videos you like?

Save to resource drawer for future reference!

What is the Drag and Drop API?

A built-in HTML5 API for creating draggable elements and drop zones

The Drag and Drop API enables users to drag elements around the page and drop them into designated areas. It's perfect for file uploads, sortable lists, and interactive interfaces.

Draggable Attribute

Add draggable="true" to any element

DataTransfer

Pass data during drag operations

File Support

Handle file drops for uploads

Basic Drag & Drop

Drag items into a drop zone with visual feedback

Interactive Drag & Drop Demo

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>
    <div class="container">
      <h1>🎯 Drag & Drop Demo</h1>
      <p class="subtitle">Drag the colored boxes into the drop zone below</p>
      <div class="drag-items" id="dragItems">
        <div class="drag-item" draggable="true" data-id="item-1">📦 Item 1</div>
        <div class="drag-item" draggable="true" data-id="item-2">📦 Item 2</div>
        <div class="drag-item" draggable="true" data-id="item-3">📦 Item 3</div>
        <div class="drag-item" draggable="true" data-id="item-4">📦 Item 4</div>
        <div class="drag-item" draggable="true" data-id="item-5">📦 Item 5</div>
        <div class="drag-item" draggable="true" data-id="item-6">📦 Item 6</div>
      </div>
      <div class="drop-zone" id="dropZone">
        <div class="drop-zone-icon">⬇️</div>
        <div class="drop-zone-text">
          <strong>Drop Zone</strong><br>
          Drag items here
        </div>
        <div class="dropped-items" id="droppedItems"></div>
      </div>
      <button class="reset-btn" onclick="resetAll()">🔄 Reset All</button>
    </div>
  </body>
</html>

Live Preview

Loading preview...

File Drop Upload

Real-world example: drag and drop files for upload

File Upload with Drag & Drop

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Drop Upload</title>
  </head>
  <body>
    <div class="container">
      <h1>📁 File Drop Upload</h1>
      <p class="subtitle">Drag and drop files here to upload</p>
      <div class="upload-zone" id="uploadZone">
        <div class="upload-icon">☁️</div>
        <div class="upload-text">Drop files here</div>
        <div class="upload-hint">or click to browse</div>
      </div>
      <div class="file-list" id="fileList"></div>
      <input type="file" id="fileInput" multiple style="display: none;">
    </div>
  </body>
</html>

Live Preview

Loading preview...

Drag Events

Key events fired during drag operations

dragstart

Fired when drag begins

dragover

Fired while dragging over drop zone

drop

Fired when item is dropped

dragend

Fired when drag completes

Best Practices

Always call e.preventDefault() in dragover to enable dropping
Provide visual feedback during drag (cursor changes, hover states)
Use dataTransfer to pass data between drag and drop
Set draggable="true" attribute on elements you want to drag
Handle both file drops and element drops if needed

Common Use Cases

File Uploads: Drag & drop files instead of clicking browse
Sortable Lists: Reorder items by dragging (Trello, Kanban boards)
Form Builders: Drag components to build interfaces
Image Galleries: Organize photos by dragging
Dashboard Widgets: Rearrange dashboard layouts

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

Geolocation API

Web Workers

HTML Code Editor

Building Your Learning Module...

Drag and Drop API

Draggable Attribute

DataTransfer

File Support

Interactive Drag & Drop Demo

File Upload with Drag & Drop

Best Practices

Common Use Cases

Geolocation API

Web Workers

HTML Code Editor

Drag and Drop API

Draggable Attribute

DataTransfer

File Support

Interactive Drag & Drop Demo

File Upload with Drag & Drop

Best Practices

Common Use Cases