Put a SortableHandle inside each item, so the rest of the row keeps its own clicks. Or pass asHandle to SortableItem to drag the whole item, which suits chips and tabs. SortableHandle takes asChild to turn any element into the handle.
Focus a handle, press Space to pick the item up, use the arrow keys to move it, and press Space again to drop. Escape puts it back. On phones, press and hold to pick up, so the page still scrolls.
The item you drop swells a touch and a soft ring fades out, with a tap sound. Picking up plays a select sound. The settle stays still when reduced motion is on.
Sortable.value and onValueChange hold the list. Items can be strings, numbers or objects with an id. For anything else, pass getItemValue. orientation is vertical, horizontal or grid, and locks dragging to that axis. modifiers replaces the lock. onMove gets the old and new index after a drop. asChild renders the list as its child.
SortableItem.value is the item id. asHandle makes the whole item the handle. disabled keeps it in place. It sets data-dragging and data-dropped for styling.
SortableHandle. A ghost icon Button with the six dot grip. Pass children or asChild to change it.
SortableOverlay. What follows the pointer. Pass a node, or a function that gets the dragged item's value. With an overlay, the item left behind fades.