Skip to main content

SortableList

Function SortableList 

Source
pub fn SortableList(_: SortableListProps) -> Element
Expand description

A list whose items can be dragged to reorder.

The component is data-agnostic: give it a len and a render callback keyed by index. It renders one wrapper div[draggable] per item and emits a SortEvent when the user drops. The item currently hovered as a drop target gets data-drop-target="true" on its wrapper for styling, and the dragged item gets data-dragging="true".

§Props

For details, see the props struct definition.

  • len : usize

    Number of items.

  • render : Callback<usize,Element>

    Renders the item at the given index.

  • on_sort : EventHandler<SortEvent>

    Fired when the user drops an item at a new position.

  • axis : Axis

    List direction: which axis rows are laid out (and shifted) along.

  • live_preview : bool

    Open a live gap where the drop would land, by translating the rows in between. Set false for the plain highlight-only behavior.

  • touch_handle : bool

    Confine touch/pen drags to a leading grip element instead of the whole row. The grip carries touch-action: none so the rest of the row keeps scrolling by finger — use this inside scrollable lists. Style it via [data-sort-handle].

  • attributes : Vec<Attribute>