PhiaUi.Components.Sortable (phia_ui v0.1.17)

Sortable drag-and-drop list components for PhiaUI.

Provides drag_handle/1, drop_indicator/1, sortable_list/1, and sortable_item/1. Pair sortable_list/1 with the PhiaSortable hook for full drag-and-drop reordering with keyboard navigation and ARIA announcements.

Minimal example

<.sortable_list id="tasks" on_reorder="reorder_tasks">
  <.sortable_item :for={{item, idx} <- Enum.with_index(@items)} id={item.id} index={idx}>
    {item.title}
  </.sortable_item>
</.sortable_list>

With drag handles

<.sortable_list id="tasks" handle={true} on_reorder="reorder_tasks">
  <.sortable_item :for={{item, idx} <- Enum.with_index(@items)} id={item.id} index={idx}>
    <.drag_handle />
    {item.title}
  </.sortable_item>
</.sortable_list>

Summary

Functions

drag_handle(assigns)

Renders a drag handle button with a 6-dot grip icon.

drop_indicator(assigns)

Renders a thin line that marks the drop position between sortable items.

sortable_item(assigns)

Renders a single sortable list item.

sortable_list(assigns)

Renders a sortable list container backed by the PhiaSortable hook.

Functions

drag_handle(assigns)

Renders a drag handle button with a 6-dot grip icon.

Place this inside a sortable_item/1. When handle={true} is set on the parent sortable_list/1, only dragging from the handle initiates a reorder.

Attributes

aria_label (:string) - Defaults to "Drag to reorder".
size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
class (:string) - Defaults to nil.
Global attributes are accepted.

drop_indicator(assigns)

Renders a thin line that marks the drop position between sortable items.

The hook toggles the active state by setting data-active on the element.

Attributes

orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
active (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

sortable_item(assigns)

Renders a single sortable list item.

Pass a drag_handle/1 in the :handle slot (or inline in inner_block) if using handle-based dragging. The data-index attribute is used by the hook to calculate reorder positions.

Attributes

id (:string) (required)
index (:integer) (required)
disabled (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)
handle

sortable_list(assigns)

Renders a sortable list container backed by the PhiaSortable hook.

Set handle={true} when each item contains a drag_handle/1 — the hook will then only initiate a drag when the user grabs the handle, not the whole item.

The hook emits on_reorder (default "reorder") with %{old_index: N, new_index: M, id: "dom-id"}.

Attributes

id (:string) (required)
orientation (:string) - Defaults to "vertical". Must be one of "vertical", or "horizontal".
handle (:boolean) - Defaults to false.
on_reorder (:string) - Defaults to "reorder".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)