makeSortableList

Source of truth. A writable ref takes the new array on drop, right after onDrop. A read-only source (a getter, a readonly ref, a computed) can't: call event.preventDefault() and apply event.result yourself. Development builds warn about a drop left to the library there, which then changes nothing.

Default: item.id, or the item itself for primitives. Also keys makeSortableItem({ item }).

Shows only the items it returns true for (a search, a tag): items (the returned one) has them, and a drag sorts among them. The others keep their places in the source: a drop writes the whole array, each hidden item still after the shown one it followed (after the nearest that stayed, when that one moved). Reactive: what it reads (a query ref) applies at once. e.to.index and activeIndex count the shown items.

Default: useId(), stable between server and client render. Read once.

What people call the list: screen reader texts say it instead of its id (position 2 of 5 in Garden).

Anything to tell about the list as a drop target: events carry it as over.data while a drag is over it.

How a press on this list's items starts a drag, instead of the provider's activation (an item's own wins). Read when a press starts.

Overlay component for this list's items (an item's own overlay wins). It receives OverlayProps and stays for the whole drag, also over other lists, unless the target under the drag has an overlay of its own (overOverlay). A ref switched mid-drag swaps it at once.

What the overlay shows while a drag this list accepts is over it, whatever list it comes from: a component that gets OverlayProps and the drag's own overlay as its default slot (see DroppableOptions.overOverlay). Read live.

How the overlay lands when a drag of this list's items ends, instead of the provider's dropAnimation (an item's own wins; a drop target's wins over both). Read at the drop.

How the overlay lands when it is dropped into this list, whatever list it comes from: wins over the dragged item's and the provider's dropAnimation. Read at the drop.

Modifiers for drags of this list's items, applied after the provider's modifiers (an item's own modifiers win): e.g. [restrictToVerticalAxis] to keep a vertical list's items on their axis. Read when the drag starts.

Locks drags of this list's items to one axis: 'y' for a vertical list, 'x' for a horizontal one (an item's own axis wins). The lock comes after the modifiers, so it holds whatever they do. Read when the drag starts.

Lists with the same group name exchange items. Default: a group of its own. Read once.

Multi-drag of items of several types: 'all' (default) or 'some' must be accepted (group.put).

Default 'vertical'.

'swap': the dragged item exchanges places with the hovered one, live; moving back onto it or off the lists reverts. Lists of one group that both swap exchange items between them: the hovered item moves into the dragged one's place, so it must be able to leave its list (group.pull: true) and enter the dragged item's (group.put). Multi-drag sorts instead. Default 'sort'.

'indicator': the list doesn't move, indicator says where the drop goes. Default 'item'.

Multi-drag mode of drags that start in this list. Default 'group'. Read when the drag starts.

false: items can't be reordered inside this list (palettes).

Creates copies (pull: 'clone', copy modifier key). Required for copying.

Accepts plain draggables from outside: creates the item to insert. With the keyboard, an arrow toward the list takes the draggable in (level with it, as moves between lists go), and the created item then moves by slots like any other.

A drag from outside the page (external) is asked twice: while it is held, for the item that shows where it goes (only active.external.fileTypes and types are known then), and at the drop, with its data (active.external.ready), for what is inserted. A list of items inserts them all where the slot was: a file each.

Takes drags from outside the page: files, links, text (see ExternalAccept). The list makes room for them as for a plain draggable, with createItem, which it needs. Items of its group dragged in from another window of the app (native) need neither option: they come in as themselves. A value, a ref or a getter, read live.

A drop outside every target: keep the items where the placeholder is, cancel, or remove them. Default 'placeholder' ('cancel' with placeholder: 'indicator'). Read at the drop.

FLIP animation of this list; default: the provider's animation. A value or a ref (a function is a custom animation).

Animates changes of items that no drag made: added, removed, moved and filtered items (see AutoAnimation). Default: the provider's animateChanges, off unless set there. Read when items changes.

The list's own size follows its items: when a drag brings an item in or takes one out (and at the drop, and for the changes animateChanges shows), it grows or shrinks to its new size with animation's duration and easing instead of jumping, and what is around it moves along. Default true; false lets it jump. Read on every change.

Overrides the provider's autoScroll for this list's scroll container. Read when the drag starts.

The element that takes drops for the list, default the list element itself: e.g. the whole column around a short list of cards, so a card let go below the last one still lands in the list (at its end). The items stay in the list element.

true: its items can't be dragged, and it takes no items.

Asked before a drop into this list, and before dropOutside: 'remove' takes its items out: false rejects it (the items fly back), some keys accept only those. May be async: the overlay waits where it was dropped. An error rejects the drop too. See SortableDropEvent for result and preventDefault.

Called once a drop into this list is accepted, before it is written: items still holds the old order, event.result the new one. Synchronous: the write follows as it returns, unless it called event.preventDefault(). Also called on the list the items came from when they are removed (to.index is -1).

The list's id: the id option, or the one made for it.

Draft order: render this, not the source array.

A drag is over the list.

Something is being dragged and this list takes it.

Indicator mode: where the drop goes in this list; null when not here.

The row a virtualizer must keep mounted: the slot while it is in this list (a copy, a created item), otherwise the dragged item; null without a drag.

Index of the active item in this list's draft, -1 when it isn't here.

Size of the dragged item at drag start: e.g. for the size of a virtual row it holds.

Animates layout changes the library didn't cause (e.g. a virtualizer re-measure).

Lists and trees with the same name exchange items.

Can items leave this list: move, copy ('clone', a palette) or not at all.

Can items enter this list: true (default), false, a type or types the items must have (as a drop target's accept: with acceptMode, all of them or some), or a function of the drag.

Keys of the items.

The items (for a plain draggable, the item createItem made).

The types of the items, together.

Source list, null for external draggables.

Id of the list asked.

Keys of the dragged items.

The items that land: the dragged ones, their copies (mode: 'copy'), or the item createItem made ('insert').

Keys that go through: all of them, unless the list or onBeforeDrop takes only some.

Keys that fly back to where they were.

Where the drag started: the list and index of the active item. list is null for a plain draggable from outside.

index is -1 when nothing landed: the items left their lists (e.source.remove(), dropOutside: 'remove').

The drop stays in the list the drag started from.

What the drop does (see DragMode).

mode: 'swap': the item the dragged one was exchanged with. It moved the other way, from the place the dragged item took (to above) to the one the dragged item started at (from above); between lists, into the dragged item's list.

The new items of every list the drop changes, by list id: exactly what the default write puts in their items, as new arrays. Moves, copies, created items, a partial accept, both sides of a swap and items removed (e.source.remove() in a target inside an item, a trash zone, dropOutside: 'remove') are all in it; a list the drop leaves as it is isn't. A tree's entry is a new root array: the nodes on the changed paths are copies (withChildren), untouched subtrees are shared, your nodes are never mutated. In onBeforeDrop it is the drop as it stands before the hook answers (returning some keys changes it); onDrop gets the final one.

Skips the default write, into every list in result (writing only some would lose or duplicate items). Apply result yourself in onDrop, or before an async onBeforeDrop resolves, and the overlay lands in the new order. Applied nowhere, the lists stay as they were and the overlay flies back (copies and created items, which have no place yet, fade out).

preventDefault() was called, in onBeforeDrop or onDrop.

A drag from outside the page (external): what it carried, with its data (it was dropped).

Id of the list (or tree) the drop goes into.

Insertion position in the list as rendered.

Item the indicator is attached to; null in an empty list.

Side of key the line goes on. 'inside' (trees): the middle of a row that takes the dragged nodes is hovered, the drop goes into it as its first child. 'swap' (behavior: 'swap'): key is the item the drop exchanges with; mark the item itself.

Trees: depth the dropped nodes get (roots are 0), e.g. to indent the line.

Trees: parent the dropped nodes get, null at the root level.