Sortable - Drag and Drop

Interactive examples of drag and drop sorting

Example 1: Basic Sortable List

Simple drag and drop list. Drag items to reorder them.

  • 🍎 Apple
  • 🍌 Banana
  • 🍊 Orange
  • 🍇 Grape
  • 🍓 Strawberry
<ul data-component="sortable" class="simple-list">
            <li draggable="true" data-id="1">🍎 Apple</li>
            <li draggable="true" data-id="2">🍌 Banana</li>
            <li draggable="true" data-id="3">🍊 Orange</li>
            </ul>

Example 2: Drag Handle

Drag only from the handle (⋮⋮). This prevents accidental dragging when clicking buttons.

⋮⋮

Task 1: Design UI

Create mockups for the homepage

⋮⋮

Task 2: Develop Backend

Create REST API endpoints

⋮⋮

Task 3: Test System

Write unit and integration tests

<div data-component="sortable" data-handle=".drag-handle">
              <div class="card" draggable="true" data-id="1">
              <span class="drag-handle">⋮⋮</span>
              <div class="card-content">
              <h3>Task 1</h3>
              <button>Edit</button>
              </div>
              </div>
              </div>

Example 3: Kanban Board

Drag cards between columns. All columns share the same group name.

📋 To Do

Design Logo

Create new company logo

Design

Write Documentation

API documentation

Docs

🔄 In Progress

Develop API

Create REST API endpoints

Development

✅ Done

Setup Server

Install and configure server

DevOps 
<div class="kanban-column"
            data-component="sortable"
            data-group="kanban"
            data-category="todo">
            <h3>To Do</h3>
            <div class="kanban-card" draggable="true" data-id="1">
            <h4>Task Title</h4>
            </div>
            </div>

Example 4: Priority List

Reorder items by priority. Uses keyboard support (Arrow keys + Space).

HIGH Fix critical security bug
MEDIUM Update dependencies
LOW Refactor old code
MEDIUM Add new feature
💡 Tip: Focus an item and use Arrow keys to move, Space to select 
<div data-component="sortable" class="priority-list">
            <div class="priority-item high" draggable="true" data-id="1" tabindex="0">
            <span class="priority-badge">HIGH</span>
            <span>Fix critical bug</span>
            </div>
            </div>

Example 5: Event Logging

See all events fired by Sortable component in real-time.

Item 1
Item 2
Item 3
Item 4

Event Log:

Drag items to see events...
const container = document.querySelector('#event-list');

            container.addEventListener('sortable:start', (e) => {
            console.log('Start:', e.detail);
            });

            container.addEventListener('sortable:end', (e) => {
            console.log('End:', e.detail);
            });