Module sortable 

Reorderable lists - drag a row and the list tells you where it landed.

Self-contained: SortableList manages its own drag state (indices only), so it needs no DndProvider. You keep ownership of the data - the component just tells you “move index 3 to index 0” and you apply it (usually with apply_sort).

Mouse, touch and pen all drive the same pointer-event gesture machine, so the browser never creates a native drag image. By default the whole row is the touch target, which sets touch-action: none on it - fine for short lists, but it stops finger-scrolling through the rows. Inside a scrollable list, set touch_handle: true to confine pointer drags to a leading grip (style it via [data-sort-handle]) so the rows themselves still scroll.

Headless: the component ships behavior plus a couple of data-* styling hooks; you compose the looks. Rows slide to preview the drop by default - opt into a floating, caller-composed ghost with overlay.

let mut items = use_signal(|| vec!["a".to_string(), "b".into(), "c".into()]);
rsx! {
    SortableList {
        len: items.read().len(),
        on_sort: move |ev: SortEvent| apply_sort(&mut items.write(), ev),
        render: move |ix: usize| rsx! { li { "{items.read()[ix]}" } },
    }
}

Re-exports

pub use SortableList_completions::Component::SortableList;

Structs

SortEvent

“Move the item at from so it ends up at index to.”

SortableListProps

Properties for the SortableList component.

Enums

Axis

Layout direction of the list - decides whether the midpoint test uses the Y axis (vertical lists) or the X axis (horizontal ones).

ReorderMode

What a completed reorder gesture means.

Functions

SortableList

A list whose items can be dragged to reorder.

apply_sort

Apply a SortEvent to a Vec in place.

apply_swap

Apply a SortEvent as a swap: the two items exchange positions.

displacement

The live-preview offset (CSS px along the list axis) for the row at ix while row from is dragged over row over - the mid-drag preview dnd-kit and react-beautiful-dnd made the baseline expectation.

pointer_target

Which row should be the drop target while a pointer drag from row from hovers at at, given per-row rects measured at drag start (so the test runs against the stable, pre-displacement layout). A row is adopted only once the pointer crosses its center in the travel direction, and while the pointer is over the source row or outside every rect, the previous target is kept. Pure, for testability.