Basic Drag & Drop
Simple drag and drop between two trees
Interactive Demo
📝 Available Tasks & Resources
🎯 Project Organization
Event Log
Real-time Events
Start dragging to see events
Drop History
No drops yet
Features
Drag & Drop Features
- Visual feedback during drag operations
- Drop validation with custom rules
- Real-time events for state management
- Cross-tree drag and drop support
Try This
- Drag tasks from left tree to status containers on right
- Drag resources to team assignments
- Notice validation prevents invalid drops
Validation Rules
- Tasks → Status containers ✅
- Resources → Team containers ✅
- Files → Files ❌
- Parent → Child ❌
Tree Reorganization
Reorder and reorganize tree structure
File System Tree
Implementation
Validation Logic
Reorganization
Reorganization Features
- Folder reordering - Move folders around
- File organization - Move files between folders
- Hierarchy validation - Prevent circular dependencies
- Type-based rules - Files can't contain other items
Try This
- Move files between folders
- Reorder folders within the same level
- Try invalid moves to see validation
Use Cases
- File managers
- Project organizers
- Menu builders
- Category managers
Configuration Options
Customize drag & drop behavior
Configuration Properties
| Property | Type | Default | Description |
|---|---|---|---|
isDragAndDropEnabled | boolean | false | Enable drag & drop functionality |
dragValidationCallback | Function | undefined | Validate drop operations |
dragHighlightClass | string | "" | CSS class for drag highlights |
isDraggableMember | string | "isDraggable" | Property name for draggable flag |
isDropAllowedMember | string | "isDropAllowed" | Property name for drop allowed flag |
Event Handling
Complete Configuration
Customization
Validation Callback
The validation function receives draggedNode, targetNode,
and position parameters. Return true to allow the drop.
Event Sequence
onNodeDragStart- User starts draggingonNodeDragOver- Dragging over potential targetsonNodeDrop- Item dropped (if validation passes)
Data Properties
Use isDraggable and isDropAllowed properties
in your data to control which nodes can be dragged or accept drops.