hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.23k stars 88 forks source link

Animate re-ordering of items during state change #787

Open patrickdundas opened 5 months ago

patrickdundas commented 5 months ago

Description

The animations in this library for user interaction of drag and drop are really nice. In my use case, I allow a user to drop items between lists, but then the lists are auto-ordered by some criteria (ie. alphabetical). My user drag and drop really just exists to allow users to transfer items between lists, not reorder.

In my onDragEnd, I re-order the items in each list alphabetically after the user drops a Draggable, but this causes the nice movement animation to where the user put the item, and then a non animated reordering of the items when the state updates to alphabetize.

How can I animate any movement / reordering of the items, whether caused by user drag or state change?