DragDrop

Utility

Drag & drop primitives and utilities for building draggable interfaces with sort, transfer, and reorder capabilities

Basic Drag and Drop With Proper Drag Overlay

Active Tasks

3
🎯 Complete project proposalPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
📧 Review email draftsPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
💡 Brainstorm new featuresPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Completed

2
✅ Update documentation
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
🚀 Deploy to production
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Multi-Selection Drag and Drop

Selection Controls

0 selected
💡 Tips: Ctrl/Cmd+Click for multi-select • Shift+Click for range • Drag to box-select • Ctrl/Cmd+A to select all

📋 To Do

4
Task 1: Review pull request
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Task 2: Update documentation
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Task 3: Fix bug in login
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Task 4: Add unit tests
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

⚡ In Progress

2
Task 5: Design new feature
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Task 6: Code review
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

✅ Done

2
Task 7: Deploy to staging
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Task 8: Update changelog
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Advanced Features

Control Panel

🌟 Active Features:

✓ Undo/Redo with 20 history steps
✓ Snap to 20px grid alignment
✓ Real-time analytics tracking
✓ Closest-center collision detection
✓ Performance monitoring
✓ Debug visualization tools

📋 Backlog (4)

🎨 Design mockupsPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
💻 Implement featurePress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
🧪 Write testsPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
📝 Update docsPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

🔥 Active Sprint (2)

🔍 Code reviewPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
🚀 Deploy to prodPress space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Drag & Drop Debug

Performance

FPS:0
Render:0.00ms

Drag State

Is Dragging:No
Active ID:—
Active Index:—
Container:—

Multi-Selection

Selected:0 items

Undo/Redo

Can Undo:No
Can Redo:No
History Size:0

Plugin System

🔌 Active Plugins:

Logger Plugin
Logs all drag events
Validator Plugin
Validates drop operations
Animator Plugin
Custom drag animations

Container 1

☰
Item 1
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
☰
Item 2
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
☰
Item 3
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Container 2 (Item 1 blocked)

☰
Item 4
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
☰
Item 5
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

📊 Event Log

Start dragging to see events...
Try this: Drag Item 1 to Container 2 - the validation plugin will prevent it!

📚 Plugin Lifecycle Hooks:

onDragStart - Called when drag begins
onDragMove - Called during dragging
onDragEnd - Called when drag ends
onDrop - Called on successful drop
onCancel - Called when drag is cancelled
onCollision - Called on collision detection

Tree View Drag and Drop

1
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
2
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
3
Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

🌳 Features:

  • Drag items to reorganize the tree
  • Click arrows to expand/collapse folders
  • Maximum depth of 4 levels enforced
  • Visual indentation shows hierarchy
  • Drag handles on the left of each item

Usage Guidelines

When to Use

  • Sortable lists
  • Kanban boards
  • File management

Accessibility

  • Keyboard drag support
  • Drop targets announced

Performance

  • RAF drag updates
  • Efficient drop detection

Common Mistakes

  • No keyboard alternative for drag
  • Drop zones not clearly marked

Frequently Asked Questions

View on GitHub

See the full source code on GitHub

Related Components

View all
Affix

Affix element to viewport with configurable offset and boundary constraints

Chart

Comprehensive charting system with 10 chart types (Line, Bar, Area, Pie, Radar, RadialBar, Scatter, Composed, Funnel, Treemap), responsive design, and data transformations

Collapsible

Animated collapsible content with controlled expansion, smooth transitions, and accessibility

Resizable

Resizable panel system with drag handles, min/max constraints, and layout persistence

Previous

TextArea

Next

AnnouncementBar