Draggable tree hierarchy components for PhiaUI.
Provides draggable_tree/1 and draggable_tree_node/1. Backed by the
PhiaDraggableTree hook which handles circular-dependency prevention,
three-zone drop positioning (before/inside/after), and expand/collapse.
Example
<.draggable_tree id="nav-tree" on_reorder="tree_reordered">
<.draggable_tree_node id="node-1" label="Section A" depth={0}>
<.draggable_tree_node id="node-1a" label="Item A1" depth={1} leaf={true} />
<.draggable_tree_node id="node-1b" label="Item A2" depth={1} leaf={true} />
</.draggable_tree_node>
<.draggable_tree_node id="node-2" label="Section B" depth={0} leaf={true} />
</.draggable_tree>Summary
Functions
Renders the root of a draggable tree backed by the PhiaDraggableTree hook.
Renders a single tree node with optional children.
Functions
Renders the root of a draggable tree backed by the PhiaDraggableTree hook.
The hook emits on_reorder with
%{id: "node-id", target_id: "sibling-id", position: "before"|"inside"|"after"}.
Drop position is determined by the vertical third of the target node that the
pointer is over.
Attributes
id(:string) (required)on_reorder(:string) - Defaults to"tree_reorder".class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Renders a single tree node with optional children.
Use leaf={true} for nodes with no children — this hides the expand/collapse
toggle button. Depth-based left padding is applied via inline style because
the value is dynamic and cannot be expressed with static Tailwind classes.
The data-depth attribute and data-parent-id (set by the hook after mount)
are used by PhiaDraggableTree to prevent circular moves.
Attributes
id(:string) (required)label(:string) (required)depth(:integer) - Defaults to0.expanded(:boolean) - Defaults totrue.leaf(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_blockicon