Documentation / Drag and drop
File tree
STEP 06 / LIVE EXAMPLE
File tree
Reorder files and folders, or drop onto a folder to move an entry inside it—even when it is empty. Nested entries move with their folder. Plain up/down arrows (or j/k) navigate visible rows; right expands or enters a folder, and left collapses it or returns to its parent. Focus a row: Alt + up/down reorders among siblings, Alt + right moves it into the preceding folder, and Alt + left moves it out. At the first or last child, Alt + up/down also moves it before or after the parent folder. Release Alt to commit; Escape cancels.
LIVE / FILE TREE
drag between directories
File tree shortcuts
Focus an item first.
- ↑ ↓ / k j
- Focus visible rows
- → / l, ← / h
- Expand or enter / collapse or leave a folder
- Home / End
- Focus first or last visible row
- Alt + ↑ ↓ / k j
- Reorder; cross out at a folder boundary
- Alt + → / l
- Move into the preceding folder
- Alt + ← / h
- Move out after the parent folder
- Release Alt / Esc
- Commit / cancel the move
src
components
button.ts
panel.ts
index.ts
docs
README.md
<rocket-sortable-tree>
<div data-tree-children data-tree-parent="">
<div data-tree-node="src" data-tree-kind="folder">
<div data-tree-row tabindex="0">src</div>
<div data-tree-children data-tree-parent="src">…files…</div>
</div>
</div>
</rocket-sortable-tree>
rocket-tree-move → { itemId, fromParent, toParent, before }