DD01 Basic Drag & Drop
Simple drag and drop between two trees
Interactive Demo
📝 Available Tasks & Resources
🎯 Project Organization
Event Log
Real-time Events
Drop History
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 ❌
DD02 Tree Reorganization
Reorder and reorganize tree structure
File System Tree
Implementation
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
DD03 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
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.
DD04 🆕 v4.5.0 Features
New drag-drop capabilities: touch support, drop positions, glow mode, and more
New Properties
| Property | Type | Description |
|---|---|---|
dragDropMode | string | 'none' | 'self' | 'cross' | 'both' - Control where drops are allowed |
dragOverNodeClass | string | CSS class for drag-over feedback. Use 'ltree-dragover-glow' for position arrows |
orderMember | string | Property name for sibling sort order (e.g., "sortOrder") |
dropZoneLayout | string | 'around' | 'above' | 'below' | 'wave' | 'wave2' - Drop zone arrangement |
dropZoneStart | number | Horizontal start position for drop zones (default: 33%) |
isLoading | boolean | Show loading overlay during async operations |
Usage Examples
Feature Guide
🎯 Drop Positions
The position parameter tells you where to insert:
'above'- As sibling before target'below'- As sibling after target'child'- As child of target
🌟 Glow Mode
Use dragOverNodeClass="ltree-dragover-glow" for visual position indicators with directional arrows.
📱 Touch Drag
- Long-press (300ms) starts drag
- Ghost element follows finger
- Haptic feedback on start
🔄 dragDropMode
'self'- Same tree only'cross'- Between trees only'both'- All operations (default)'none'- Disable drag-drop
DD05 Drop Zone Styles
Configure visual drop zone appearance with session storage persistence
Interactive Demo
Configuration
Style Options
Drop Zone Modes
- Glow: Shows glowing border indicators (above/below/child arrows)
- Floating: Shows popup buttons for drop positions
Floating Layouts
- Around: Above indicator on top, below/child on bottom
- Above: All three indicators in a row above the node
- Below: All three indicators in a row below the node
- Wave: Stacked vertically on the right
- Wave2: Diagonal pattern arrangement
Persistence
Settings are saved to sessionStorage automatically.
Refresh the page to verify persistence!
D&D Scenarios
Real-world tree manipulation workflows with database integration patterns. Learn when to use full redraw, partial updates, CRUD operations, and batch saves.
View D&D Scenarios