1

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

Hartaithan.
  • 326
  • 3
  • 14
  • 1
    Normally you could add zIndex: ```zIndex: isDragging ? 35 : 20```. (get it from const { isDragging } = useSortable() ) But It is not working when I try on sandbox. – Werthis Jul 28 '23 at 13:54
  • yeah, becauce overflow-y: auto is set on virtualized list – Hartaithan. Jul 29 '23 at 07:05
  • Maybe if you can make work around for it you could use zIndex. For now it's the only way I know to do it – Werthis Jul 31 '23 at 10:00

1 Answers1

0

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

Hartaithan.
  • 326
  • 3
  • 14