I’m working on a drag-and-drop feature using React, TailwindCSS, Framer Motion, and DnDKit. Everything works as intended except for one case, and I’m looking for help to resolve it.

TL;DR:
CodeSandbox link here. It works best if both containers have 3 items and you drag an item from container 1 to container 2 very slowly. You’ll notice the draggable item is “stuck” with the first item of container 2.

The Setup:

1.  I have multiple containers, each created using DnDKit’s useSortable.
2.  Each container holds a list of items that can be dragged within the container or moved to another container.
3.  I use Framer Motion’s layoutId on the containers to animate the height when an item enters or leaves a container. This creates a smooth transition as the container adjusts its size.

The Problem:

When dragging an item from one container to another:

• If I drag an item upward into a new container, everything works smoothly.
• However, if I drag an item downward into a new container, I encounter a visual issue:
  • The height of the old container decreases.
  • The height of the new container increases.
  • This causes the new container to “move up,” shifting its items along, which causes the draggable item to behave incorrectly.

What I’ve Tried:

1.  Adding placeholders to maintain the container’s height during the drag.
2.  Using Framer Motion’s layout and layoutId to control animations.
3.  Playing with the DragOverlay component in DnDKit to decouple the dragged item’s position.

While these help to some extent, the issue persists when the layout of containers and items adjusts mid-drag.

What I Need Help With:

How can I:

1.  Prevent the items inside the new container from shifting while dragging?
2.  Ensure smooth height animations without disrupting the drag-and-drop experience?

Any suggestions or ideas on how to resolve this? Thank you! 😊