Transition element order after external state update

[devinhalladay]

Hi! I'm using dnd-kit to power a prototype that allows users to rank many items based on their interdependencies. Users can drag the list on the right to re-order them, or draw lines between items on the circle to rank them by output count:

The problem is that I'd like to use the Sortable component in a controlled way, transitioning components in the list when they are re-ordered by another component (for example, by drawing a new line on the circle). That way, when a user draws a line, the sortable list reorders with the expected transition. Does dnd-kit (or the sortable extension) export a helper I could use to accomplish this?

[clauderic]

Assuming you are using a version of @dnd-kit tagged with @next on npm, you should be able to achieve this by passing the following configuration to useSortable:

function animateLayoutChanges({isSorting, wasSorting}) {
  if (isSorting || wasSorting) {
    return false;
  }

  return true;
}

useSortable({
  id,
  animateLayoutChanges,
});

You will also need to update the measuring prop of <DndContext>. If you're using an older version of @dnd-kit, this prop used to be called layoutMeasuring.

import {MeasuringStrategy} from '@dnd-kit/core';

const measuringConfig = {
  droppable: {
    strategy: MeasuringStrategy.Always,
  },
};

<DndContext measuring={measuringConfig} />