Reorder

Accessible pointer and keyboard ordering for lists, grids, and compatible collections.

Overview

ReorderGroup owns a bindable ordered array and ReorderItem represents each stable value. It animates displaced siblings with FLIP projection and supports transfer between compatible named groups.

Behaviour and customization

Press Space or Enter to pick up an item, use the relevant arrow keys to move it, and Escape to cancel. axis="both" uses closest-center collision for grids. Pointer transfer uses matching group names and accepts predicates.

Keep each keys stable and equal to the item value. For rows, use DataTable’s reorderable API; for application trees, use Tree View’s built-in reorder behaviour rather than forcing unrelated data structures into a flat list.

Interactive example

Drag a task by its row to reorder the bound array.

Research

Prototype

Review

Ship

Order: Research → Prototype → Review → Ship

Usage

<script lang="ts">
	import { ReorderGroup, ReorderItem } from 'fractalsvelte/motion';

	let tasks = $state(['Research', 'Review', 'Ship']);
</script>

<ReorderGroup bind:values={tasks}>
	{#each tasks as task (task)}
		<ReorderItem value={task}>{task}</ReorderItem>
	{/each}
</ReorderGroup>

API

Prop	Type	Default	Description
`values`	`T[]`	`-`	Bindable ordered collection.
`axis`	`'x' \| 'y' \| 'both'`	`'y'`	Collision and keyboard direction.
`group / id`	`string`	`-`	Enable pointer transfers between collections.
`ontransfer`	`(detail) => void`	`-`	Receives cross-list transfer detail.

Components and blocks

Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:

Data Table
Tree View
sortable lists and grids

For exact built-in component timing and reduced-motion behaviour, see the Motion guide.