tp-elements/tp-tree-nav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add drag and drop of nodes

Browse Source
This commit is contained in:
trading_peter
2025-12-17 22:17:40 +01:00
parent a8f08ab02a
commit b92bbeb0c2
3 changed files with 304 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -139,10 +139,16 @@ customElements.define('my-tree', MyTree);
- `node-click`: emitted on row click.
- `node-action`: emitted for toggles (`action: 'toggle'`, source chevron/double-click), inline actions, and context menu actions.
- `node-context`: before showing context menu; `preventDefault` to cancel.
- `node-drop`: emitted on valid drop (`detail: { source, target, position }`).
### Helpers (both modes)
- `TpTreeNav.buildTree(items, { expandedPaths, selectedPaths, selectionState, applyStates, knownPaths, autoExpandNew })` — pure helper used by managed mode; can be used externally.
- `applyStateIf(state, predicate)`, `clearState(state)`, `getNodesWithState(state)` for immutable transforms/queries.
### Drag and Drop
Enable drag and drop by setting `allowDragAndDrop = true`.
- **Validation**: Provide `canDrop(source, target, position)` to allow/deny drops. `position` is `'inside'`, `'before'`, or `'after'`.
- **Event**: Listen to `node-drop` event (`detail: { source, target, position, originalEvent }`).
### Data shape
- `slug` (unique per sibling), `label`, `icon` (string key or icon data), `children` (array), optional `actions` (`{ action, label?, icon?, tooltip? }`).