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

Question

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

Answer 1

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