Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hello-pangea/dnd does not work with react-virtuoso if the rows are different heights #648

Open
55Cancri opened this issue Aug 19, 2023 · 1 comment

Comments

@55Cancri
Copy link

If the rows are dynamic heights, the list will jump around a lot when you move items, especially if you move items across large distances (>50 items). Also its impossible to drag a card to the bottom as it stops halfway.

Here is a codesandbox: https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-forked-dynamic-heights-hhjcx8

Steps to reproduce the behavior:

  1. Grab a small card from the top
  2. Try to drag down at least 50-100 cards
  3. Notice the list jumps by a large margin from where you originally dropped the card
  4. Now try dragging a card to the bottom of the list
  5. Notice it gets stuck about halfway, meaning it is not possible to drag cards to the bottom if the card heights are different sizes

Expected behavior
No jumpiness expected. I suspect it means the height measurements are inaccurate somewhere.

I opened this PR for react virtuoso as well (petyosi/react-virtuoso#967 (comment)), but the maintainer believes this is an issue with the @hello-pangea/dnd library.

Is there any combination of dnd libraries + virtualized list libraries that allow for dragging cards with varying heights? Neither react-window or react-virtualized worked either.

@resthedev
Copy link

Hey, I am actively using react-virtuoso and was looking to integrate drag reorder support. Were you ever able to find a solution to this? I'm trying to decide between hello-pangea/dnd and dnd-kit to use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants