Wait with transition for element to be dropped @dnd-kit React

Question

I'm using @dnd-kit in my React project and I try to insert elements from lower list to the upper list. I want to control the transition of placeholder to wait until the element gets inserted, so it does not jump. Unfortunately the transition happens because class expanded is gone when isOver is false. Does anyone have an idea how I can first wait for the insertion and then do the transition? Here is a link to the codesandbox https://codesandbox.io/p/sandbox/friendly-moser-ih8v08

Answer 1

I am not sure I got what you need but this is what I did:

In CartItem.tsx add:

you can use transition but you need to switch to useSortable, which works quite the same.

import {useSortable} from '@dnd-kit/sortable';
import { CSS } from "@dnd-kit/utilities";

const {
    isDragging,
    setNodeRef,
    attributes,
    listeners,
    transform,
    transition,
  } = useSortable({
    id: item,
    data: {
      text: item,
      position,
      type,
    },
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

In App.tsx I changed DraggEnd and DraggStart. First it width is set to 0 and then after dragg end it is set to width.

  function handleDragStart(event: DragStartEvent) {
    const { active } = event;
    setPlaceholderWidth(0);
    setActiveId(active.id.toString());
    setActivePosition(active.data.current?.position);
  }

  function handleDragEnd(event: DragEndEvent) {
    setActiveId(null);
    setActivePosition(-1);
    const { active, over } = event;
    const activeElement = document.getElementById(active.id.toString());
    if (activeElement) {
      const rect = activeElement.getBoundingClientRect();
      const { width } = rect;
      setPlaceholderWidth(width);
    }

It is not the best solution but I hope it helped.

PS. If you have a problem with animation of dropping you can change it using drop-animation prop