Draggable List
Advanced draggable list component with smooth animations, keyboard-accessible reordering, nested lists, and customizable drag handles. Perfect for creating sortable interfaces, kanban boards, and priority lists.
Pro features
What the Pro version adds to this component.
Custom Drag Handles
Flexible drag handle positioning and custom styling
Nested Lists
Support for nested draggable lists with independent sorting
Smooth Animations
Physics-based animations for natural drag interactions
Strict Handle Mode
Restrict dragging to the handle only, so interactive content inside an item stays clickable
Keyboard Reordering
Pick up, move and drop items with the keyboard, with live-region announcements
Customizable Styles
Complete control over drag states and visual feedback
Installation
Install via CLI
npx @moontra/moonui-cli add draggable-listUsage
First Item
This is the first item
Second Item
This is the second item
Third Item
This is the third item
Fourth Item
This is the fourth item
Examples
Basic Draggable List
Simple reorderable list with smooth animations
Task Management Board
Complex task list with priority, assignees, and due dates
Custom Drag Handle & Actions
List with custom drag handle position and interactive elements
Kanban Board
Multiple draggable lists for kanban-style boards
Nested Lists
Draggable lists with nested draggable items. The outer list uses strictDragHandle so dragging a child never starts a parent drag.