English
Drag & Drop Components
Interactive drag and drop functionality using SortableJS. Create intuitive user interfaces with smooth animations and flexible sorting capabilities across different container types.
Cross Container
Drag items between different lists
Smooth Animation
Beautiful transitions and effects
Touch Support
Works on mobile and tablet devices
Basic Sortable Lists
Drag items between two lists with shared group functionality
To Do
itemsIn Progress
Drop hereDrag tasks here to mark as in progress
Interactive Actions
Drag items between lists and interact with action buttons
Favorites
Special itemsBookmarks
Saved itemsDrag Handle Control
Items can only be dragged using the specified handle element
Team Alpha
3 members- Use handle →
Team Beta
2 members- Use handle →
Drag Handle Instructions
Items can only be dragged by clicking and holding the handle ( ) icon. Clicking anywhere else on the item will not initiate dragging.
Multi-Selection Drag
Select multiple items and drag them together as a group
Available Projects
Hold Ctrl/Cmd to select multipleDue: Dec 25, 2024 •
Active
Assigned Projects
Drop zoneNo projects assigned yet
Drag multiple projects here to assign them
Multi-Selection Guide
• Click: Select single item
• Ctrl/Cmd + Click: Add/remove items from selection
• Drag: Move all selected items together
Kanban Board Style
Project management board with workflow stages
Backlog
In Progress
- Progress
Done
- Completed
File Drag & Drop Zone
Drag files from your computer or reorder uploaded files
Drop files here or click to browse
Supports: JPG, PNG, PDF, DOC (Max: 10MB each)
Uploaded Files
Drag to reorder- •
Pro Tips
• Multiple Selection: Hold Ctrl/Cmd while selecting files
• Drag from Desktop: Drag files directly from your file explorer
• Reorder Files: Drag uploaded files to change their order