How to animate DnD?

[Stepashka20]

I use simple template:

<DndContext onDragEnd={handleDragEnd} >
    <Droppable id="0">
        {props.bins_map[0] !== 0 ? <Draggable id="0" /> : ""}
    </Droppable>
    <Droppable id="1">
        {props.bins_map[1] !== 0 ? <Draggable id="1" /> : ""}
    </Droppable>
    <Droppable id="2">
        {props.bins_map[2] !== 0 ? <Draggable id="2" /> : ""}
    </Droppable>
</DndContext>

Where bins_map stores 1 if there is a bin, 0 if there is not.
In handleDragEnd i change props.bins_map.But when i change bins_map_, bin instantly teleports:

But in the example animation very smooth.How to make this animation?

[clauderic]

In order for the drop animation to work, you need to actually move the draggable from one position in the tree to another.

In this case, you aren't moving the draggable with id="0" to be inside the droppable with id="1", you are just un-mounting the draggable with id="0" and mounting a new draggable with id="1" within the droppable of id="1", which i why the drop animation is not working.

[RemyMachado]

@clauderic Do you have an example on how to do this please? (moving the position in the tree without unmounting)

The DragOverlay docs states unmounting & mounting:

If your item needs to move from one container to another while dragging, we strongly recommend you use the component so the draggable item can unmount from its original container while dragging and mount back into a different container without affecting the drag overlay.

[jcheese1]

I see what you mean @clauderic , but what if the components are derived from map?

ex.

{cards.map(id => (
   return (
      <Draggable>
         <Card />
      </Draggable>
   )
))}

Will I have to put all of these in a useRef or something?

[adagar]

@jcheese1 I've got the same Q, when it's all generated via map

[GradySain]

@jcheese1 I have the same question as well. Any idea how to accomplish this?

[niranjan821]

I have same question

[julianthurner]

I see what you mean @clauderic , but what if the components are derived from map?

ex.

{cards.map(id => (
   return (
      <Draggable>
         <Card />
      </Draggable>
   )
))}

Will I have to put all of these in a useRef or something?

Edit: In a previous version of this answer, I had forgotten to mention that I was using a DragOverlay, so I updated the answer accordingly.

There's no need to actually move components in the DOM tree. If you use a DragOverlay, the animation will work fine as long as you assign the right IDs to your draggables. The following concept should work fine:

const [items, setItems] = useState<Record<UniqueIdentifier, UniqueIdentifier[]>>({ 
    containerA: ['item1', 'item3', 'item6'],
    containerB: ['item5'],
    containerC: ['item2', 'item4'],
});
const [activeDraggableId, setActiveDraggableId] = useState<UniqueIdentifier | null>(null);

const updateItems = (
    oldItems: Record<UniqueIdentifier, UniqueIdentifier[]>,
    activeId: UniqueIdentifier,
    overId: UniqueIdentifier
) => {
    if (oldItems[overId].includes(activeId)) {
        return oldItems;
    }

    const newItems: Record<UniqueIdentifier, UniqueIdentifier[]> = {};
    for (const container of Object.keys(oldItems)) {
        newItems[container] = oldItems[container].filter((item) => item !== activeId);

        if (container === overId) {
            newItems[container] = [...newItems[container], activeId];
        }
    }

    return newItems;
};

const onDragStart = useCallback(({ active }: DragStartEvent) => {
    setActiveDraggableId(active.id);
}, []);

const onDragCancel = useCallback(() => {
    setActiveDraggableId(null);
}, []);

const onDragEnd = useCallback(({ active, over }: DragEndEvent) => {
    setActiveDraggableId(null);

    if (!over || !active) {
        return;
    }

    setItems((i) => updateItems(i, active.id, over.id));
}, []);

<DnDContext onDragStart={onDragStart} onDragCancel={onDragCancel} onDragEnd={onDragEnd}>
    {Object.keys(items).map((containerId) => (
        <Droppable id={containerId} subItems={items[containerId]} />
    ))}
    {createPortal(
        <DragOverlay>
            {!!activeDraggableId && <Item text={activeDraggableId} />}
        </DragOverlay>,
        document.body
    )}
</DnDContext>

and within Droppable:

interface Props {
    id: UniqueIdentifier;
    subItems: UniqueIdentifier[];
}

const Droppable = ({id, subItems}: Props) => {
    const { setNodeRef } = useDroppable({ id: id});

    return (
        <div ref={setNodeRef}>
            {subItems.map((subItem) => (
                <Draggable id={subItem} key={subItem}>
                    <Item text={subItem} />
                </Draggable>
            ))}
        </div>
    );
}

The Draggable components are mapped with IDs from a UniqueIdentifier array. As long as the Record that holds those IDs is updated correctly, the Draggable components will have correct animations that move them to their new container.
However, depending on your use case, you may need to work with useSortable to have the remaining items animate as well when their order gets shuffled around. In that case, you may want to take a look at
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/presets-sortable-multiple-containers--basic-setup and
https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/4-MultipleContainers.story.tsx
But as long as you only move items from static positions to static positions, you should be fine without it.