Ordering

Where a dragged item lands, and key-driven moves, computed from rectangles.

Reach for it for your own drag logic, or to apply the change a sortable reports. The helpers are pure: no DOM at import time or in the call path, so they run on the server and in tests. Each result below is computed when the page is built, by running the call shown.

Import

import {
	reorder,
	resolveSortIndex,
	resolveInsertIndex,
	resolveSortKeyIndex,
	resolveContainerKeyIndex,
	findRectIndex,
	type SortableRect,
	type SortableAxis,
} from '@ecopages/radiant-ui/helpers';

Order

reorder computes the new array from an onChange of SortableController. The resolve* functions take item rectangles ({ top, left, width, height }) and a pointer point.

const rects = [
	{ top: 0, left: 0, width: 100, height: 20 },
	{ top: 20, left: 0, width: 100, height: 20 },
	{ top: 40, left: 0, width: 100, height: 20 },
];