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
drop-zone-mode- 'glow' | 'floating'allow-copy- Enable Ctrl+dragorder-member- 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
allowed-drop-positions-member- Static from datagetAllowedDropPositionsCallback- Dynamic logic (JS property)
beforeDropCallback
Async validation before drop. Return false to cancel, or modify position/operation.
API Reference
All drag & drop related properties
Properties
| Attribute / Property | Type | Description |
|---|---|---|
drop-zone-mode | 'glow' | 'floating' | Visual style for drop indicators |
drop-zone-layout | string | Floating layout: around, above, below, wave, wave2 |
allow-copy | boolean | Enable Ctrl+drag to copy |
auto-handle-copy | boolean | Auto-handle same-tree copy (default: true) |
drag-drop-mode | string | none | self | cross | both |
order-member | string | Data property for sibling sort order |
allowed-drop-positions-member | string | Data property for allowed positions array |
getAllowedDropPositionsCallback | function | Dynamic allowed positions per node (JS only) |
Events
| Event | Detail Properties |
|---|---|
node-drag-start | node, event |
node-drag-over | node, event |
beforeDropCallback | (dropNode, draggedNode, position, event, operation) - JS property |
node-drop | 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
is-draggable-member and is-drop-allowed-member attributes to map custom property names.