Fractal UI Motif Fractal UI Type
On this Page

ReorderTransferDetail

ReorderTransferDetail<T> describes an item that has been transferred into a compatible ReorderGroup. It is the payload passed to the receiving group’s ontransfer callback and is a TypeScript interface, not a rendered component.

Usage

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

	type Task = { id: string; label: string };

	let backlog = $state<Task[]>([{ id: 'research', label: 'Research' }]);
	let inProgress = $state<Task[]>([]);
	let lastTransfer = $state<ReorderTransferDetail<Task> | undefined>();
</script>

<ReorderGroup bind:values={backlog} id="backlog" group="tasks">
	{#each backlog as task (task.id)}
		<ReorderItem value={task}>{task.label}</ReorderItem>
	{/each}
</ReorderGroup>

<ReorderGroup
	bind:values={inProgress}
	id="in-progress"
	group="tasks"
	ontransfer={(detail) => (lastTransfer = detail)}
>
	{#each inProgress as task (task.id)}
		<ReorderItem value={task}>{task.label}</ReorderItem>
	{/each}
</ReorderGroup>

{#if lastTransfer}
	<p>{lastTransfer.value.label} moved from {lastTransfer.from} to {lastTransfer.to}.</p>
{/if}

Matching group values enable pointer transfer between lists. The destination group emits ontransfer after it has inserted the value into its bound values array.

API

TypeScript 
interface ReorderTransferDetail<T = unknown> {
	value: T;
	from?: string;
	to: string;
	index: number;
}
FieldTypeDescription
valueTThe item moved into the receiving group.
fromstring \| undefinedThe source group’s id, when one is available.
tostringThe receiving group’s id.
indexnumberZero-based insertion index in the receiving group.
  • Use Reorder for the complete ReorderGroup and ReorderItem interaction model.
  • ReorderGroup accepts ontransfer?: (detail: ReorderTransferDetail<T>) => void.
  • Use id, group, and accepts on ReorderGroup to identify compatible source and destination collections.