Module sortable 

Reordering items within a single list.

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).

Touch and pen work instantly in every browser: alongside the native HTML5 drag path (mouse), each row runs the same pointer-event gesture machine as crate::pointer::PointerDraggable. 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 touch drags to a leading grip (style it via [data-sort-handle]) so the rows themselves still scroll.

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). Mirrors the native path’s midpoint hysteresis: 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.