Draggable List
Advanced draggable list component with smooth animations, touch support, nested lists, and customizable drag handles. Perfect for creating sortable interfaces, kanban boards, and priority lists.
Pro Features
Unlock advanced capabilities with the Pro version
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
Auto-scroll
Automatic scrolling when dragging near container edges
Touch Support
Full touch and gesture support for mobile devices
Customizable Styles
Complete control over drag states and visual feedback
Installation
Install via CLI
moonui 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
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
Task Management Board
Complex task list with priority, assignees, and due dates
Project Planning
Plan out the project roadmap and milestones
Design Review
Review UI/UX designs with stakeholders
Team Sync
Weekly team synchronization meeting
Deploy to Production
Deploy the latest features to production
Custom Drag Handle & Actions
List with custom drag handle position and interactive elements
Important Task
Regular Task
Low Priority
Urgent Task
Kanban Board
Multiple draggable lists for kanban-style boards
To Do2
Research user requirements
ResearchCreate wireframes
DesignIn Progress2
Implement authentication
DevelopmentDesign system setup
DesignDone2
Project kickoff
MeetingDatabase schema
DevelopmentNested Lists
Draggable lists with nested draggable items