Drag, drop, sort - sorting is not animating, but results of onDragEnd produce correct results

[GradySain]

Hello,

Here is a link to my issue - set up in StackBlitz.

https://stackblitz.com/edit/react-dnitfq?file=src/components/App.js

I am trying to build a fairly complex (for me) scenario:

• User can drag from array of objects (on left) into drop zone.
• While on the left, objects do not have a "sortID" property. They are not sortable on the left.
• Once they are dropped, these objects are assigned a "sortID" property.
• Need to keep the objects on the left (user can drop them multiple times into the drop zone).
• Once in the drop zone, the items need to be sortable.
• Using SortableContext

The problem- the sortable elements do not animate when they are being dragged. But once they are dropped, their order is correct.

I think I am doing something wrong (either a small error, or a very big misunderstanding of how to set this up). Any help would be greatly appreciated :)

[GradySain]

Okay I think I have a fix.

Found a similar issue addressed here: https://github.com/clauderic/dnd-kit/issues/183

I was using an array of objects as the items in SortableContext, as opposed to an array of ints.

For anyone that wants to fix the stack blitz link above and learn how the fix works:

• go to Droppable.js
• insert this code
• const itemIds = useMemo(() => props.droppedItems.map((item) => item.sortID), [props.droppedItems]);
• this creates an array of ints from the props objects' sortID properties
• then change SortableContext to
• <SortableContext items={itemIds} strategy={rectSortingStrategy}>

[fullnelson14]

I've got the same issue. I am doing everything in that was suggested above, but no dice. The <SortableContext> is getting an array of strings, but still no animations. Any other pointers?

[fullnelson14]

Ah! Nevermind! The <SortableContext> needs INTs! Not strings! At least that is what fixed it for me.

[saltcod]

Doesn't need ints but does need an array of unique ids. So instead of passing an array of todos, for example, you need to pass an array of todo ids.

const [items, setItems] = useState(todos.map((todo) => todo.id))

<SortableContext items={items} strategy={verticalListSortingStrategy} >
   {items.map((item) => (
        <SortableItem key={item} id={item} />
    ))}
</SortableContext>