search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
11.9k stars 602 forks source link

rectSwappingStrategy has bad/unnecessary animation #1385

Open BeemWex opened 2 months ago

BeemWex commented 2 months ago

When using rectSwappingStrategy and arraySwap on dropping an item that's further away than a direct neighbour has some unnecessary animation.

See this sandbox: https://codesandbox.io/p/sandbox/react-dnd-kit-swapping-order-forked-myd3wh

If you drag from 1-2, 4-3, or diagonal from 3-2 they all animate fine on dropping (swapping neighbours) If you drag from 1-4 or from 3-1 an unnecessary animation is visible (swapping distant items)

Does anyone have a temporary-fix?

wingleung commented 1 month ago

was also running into this issue, there is a workaround for this explained here 👉 https://github.com/clauderic/dnd-kit/issues/336#issuecomment-864564264

useSortable({
  id: item.id,
  animateLayoutChanges: () => false, // <- add this line
});

the docs explaining animateLayoutChanges still needs to be added https://github.com/clauderic/dnd-kit/issues/1022#issuecomment-2060764681