Interactive Demo
Drag between trees with configurable drop zones
Demo
Source (drag from here)
Target (drop here) - Trash only accepts 'child'
Controls
Features
Drop Positions
above- Insert as sibling beforebelow- Insert as sibling afterchild- Insert as child
Key Props
dropZoneMode- 'glow' | 'floating'allowCopy- Enable Ctrl+dragorderMember- Sibling sort order
Touch Support
Long-press (300ms) to drag on mobile.
Advanced Features
Restricted positions, async callbacks, and dynamic rules
Demo
Try: 🗑️ Trash = child only | 📁 Folder = all | 📄 File = above/below only
Code
Restricted Positions & Async
Details
allowedDropPositions
Restrict which positions are valid per node:
['child']- Trash folders['above', 'below']- Files (no nesting)undefined- All allowed (default)
Two Ways to Set
allowedDropPositionsMember- Static from datagetAllowedDropPositionsCallback- Dynamic logic
beforeDropCallback
Async validation before drop. Return false to cancel, or modify position/operation.
API Reference
All drag & drop related properties
Properties
| Prop | Type | Description |
|---|---|---|
dropZoneMode | 'glow' | 'floating' | Visual style for drop indicators |
dropZoneLayout | string | Floating layout: around, above, below, wave, wave2 |
allowCopy | boolean | Enable Ctrl+drag to copy |
autoHandleCopy | boolean | Auto-handle same-tree copy (default: true) |
dragDropMode | string | none | self | cross | both |
orderMember | string | Data property for sibling sort order |
allowedDropPositionsMember | string | Data property for allowed positions array |
getAllowedDropPositionsCallback | function | Dynamic allowed positions per node |
Events
| Event | Parameters |
|---|---|
onNodeDragStart | (node, event) |
onNodeDragOver | (node, event) |
beforeDropCallback | (dropNode, draggedNode, position, event, operation) → bool | Promise |
onNodeDrop | (dropNode, draggedNode, position, event, operation) |
Position: 'above' | 'below' | 'child'
Operation: 'move' | 'copy'
Operation: 'move' | 'copy'
Data Properties
| Data Property | Type | Description |
|---|---|---|
isDraggable | boolean | Can this node be dragged? |
isDropAllowed | boolean | Can drop on this node? |
allowedDropPositions | DropPosition[] | ['above', 'below', 'child'] |
Tip: Use
isDraggableMember and isDropAllowedMember props to map custom property names.