Sortable with removable items and with layout animations

[joseDaKing]

I want to have animate items that are deleted, like in the Sortable -> Vertical -> Removable example, I have tried to use animateLayoutChanges prop in the useSortable hook.

// code inside component
const sortableProps = useSortable({ 
  id: value,
  animateLayoutChanges: defaultAnimateLayoutChanges
});

[clauderic]

Hey @joseDaKing,

There are two pieces required to have @dnd-kit manage layout animations for you, as can be seen in the removable items example.

First, you must pass a custom measuring config to <DndContext> to tell @dnd-kit to always measure droppable containers, even when not dragging. By default, @dnd-kit only measures items while dragging.

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

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

<DndContext measuring={measuringConfig} />

Next, you need to tell useSortable to animate layout changes when not sorting:

import {defaultAnimateLayoutChanges} from '@dnd-kit/sortable';

function customAnimateLayoutChanges(args) {
  if (args.isSorting || args.wasDragging) {
    return defaultAnimateLayoutChanges(args);
  }
  
  return true;
}


const sortableProps = useSortable({
  animateLayoutChanges: customAnimateLayoutChanges
});

[joseDaKing]

@clauderic Tried this out but it doesn't work, here is a link to codesandbox

[joseDaKing]

I fixed the reason was accidentally used useSortable inside dragoverlay