# `PhiaUi.Components.DraggableTree`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/interaction/draggable_tree.ex#L1)

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>

# `draggable_tree`

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 to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `draggable_tree_node`

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 to `0`.
* `expanded` (`:boolean`) - Defaults to `true`.
* `leaf` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`
* `icon`

---

*Consult [api-reference.md](api-reference.md) for complete listing*