drag-and-dropoverflowui-virtualizationdnd-kitreact-virtuoso

The dragged item is not displayed outside the virtualized list (react-virtuoso, @dnd-kit)

I am trying to use dnd-kit together with react-virtuoso and everything works, except that the dragged item is not displayed outside the virtualized list

How to make the dragged item appear outside the virtualized list? High z-index on the dragged item doesn't work.

And when you start dragging an item inside a virtualized list a horizontal scroll appears, that's not good either.

Sandbox - https://codesandbox.io/s/dnd-kit-board-virtuoso-7yzcwj

Solution

  • Okay, I found a solution. If you need to display the dragged item outside the virtualized list, you need to use DragOverlay

    Thanks to @mescalas - https://github.com/mescalas

    DragOverlay Docs - https://docs.dndkit.com/api-documentation/draggable/drag-overlay

    Updated sandbox - https://codesandbox.io/s/dnd-kit-board-virtuoso-7yzcwj