search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.97k stars 643 forks source link

The dragged item is not displayed outside the virtualized list (usage with react-virtuoso) #1203

Closed Hartaithan closed 1 year ago

Hartaithan commented 1 year ago

Describe the bug

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.

Reproduction

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

To Reproduce

  1. Go to sandbox link
  2. Start dragging any item

Expected behavior

The dragged item should be displayed even outside the virtualized list.

mescalas commented 1 year ago

Use DragOverlay

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

Hartaithan commented 1 year ago

@mescalas Yeah, it works. Thank you very much!

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