Skip to main content

Sortable Types

Types for sortable list configuration, events, and handles.

SortableReorderEvent<T>​

Fired when items are reordered.

interface SortableReorderEvent<T> {
  data: T[];            // The reordered array
  fromIndex: number;    // Original position
  toIndex: number;      // New position
  fromItem: T;          // The moved item
  toItem: T;            // The displaced item
  isExternalDrag: boolean; // Was the drag from outside this list
}

SortableDragStartEvent<T>​

interface SortableDragStartEvent<T> {
  index: number;
  item: T;
}

SortableDragPositionChangeEvent<T>​

interface SortableDragPositionChangeEvent<T> {
  index: number;
  item: T;
  toIndex: number | undefined;
  previousIndex: number | undefined;
}

SortableDragEndEvent<T>​

interface SortableDragEndEvent<T> {
  index: number;
  item: T;
  toIndex: number | undefined;
  cancelled: boolean;
}

SortableReorderStrategy​

type SortableReorderStrategy = 'insert' | 'swap';

SortableAnimationConfig​

type SortableAnimationConfig = SortableAnimationPreset | SortableAnimationCustomConfig;

SortableAnimationPreset​

type SortableAnimationPreset = 'default' | 'spring' | 'gentle' | 'snappy' | 'none';

SortableAnimationCustomConfig​

interface SortableAnimationCustomConfig {
  shiftDuration?: number;   // default: 200
  useSpring?: boolean;      // default: false
  springDamping?: number;   // default: 15
  springStiffness?: number; // default: 150
  springMass?: number;      // default: 1
}

DropIndicatorProps​

Props for renderDropIndicator on SortableContainer.

interface DropIndicatorProps {
  visible: boolean;
  horizontal: boolean;
}

CollisionAlgorithm​

type CollisionAlgorithm = 'center' | 'intersect' | 'contain';