React-beautiful-dnd: Grid Layout

[nperichSYKES]

Bug or feature request?

Feature Request

https://github.com/atlassian/react-beautiful-dnd/issues/133
Previous duplicate issue but it was closed over a year ago with an indication that it might be considered in the future.

Reopening to show interest in the feature, and perhaps get feedback into current thinking on it (such as whether it is feasible or difficult, and whether it's something it's reasonable to get outside contributions on).

The one thing holding me back from using RBDnD everywhere is that a few places in my apps require dragging items in lists that are laid out in a grid. It's obviously a pattern that has its place (for example, being able to browse many thumbnails at once, like when browsing a movie to watch), and is completely within the philosophy and mission of this library (dragging around items in a list in a physical way). At a conceptual level, the change is "just" adding a third option to how the list flows on the screen.

Though I understand getting the same high quality of UX for grid lists that RBDnD has set for horizontal and vertical lists might be a huge undertaking. Personally I'd be happy if the grid layout was marked as "experimental" and actually doesn't get the same polish for quite some time.

It might also be useful to start a discussion about what traps there might be when laying out a list of items in a grid. For example, there might be an ambiguity in keyboard navigation: if you want to move an item "down" in the list, do you hit right arrow corresponding to the visual layout or down arrow corresponding to the list order?

Thanks for your work on an amazing library! It's one of my favorites.

[Zhephyr54]

I am in the exact same situation wanting to use this awesome library but holding back because of lacking grid support :( ...

[lenastshaleb]

+1

[zedzedQ]

same issue here, it might be possible by using css flex box? if we know the actual size

[maieonbrix]

+1

[chaitanyapilaka]

Grid functionality would be extremely useful for my project and company as well. Would love to see some progress on it and I'm also willing to help.

[atifsyedali]

IMO, grid functionality would really complicate matters. I like the list-only focus of this library. Adding grid may mean lots of regressions in the list functionality.

Have you folks tried out https://strml.github.io/react-grid-layout/examples/0-showcase.html instead for grid?

[Zhephyr54]

@atifsyedali I agree with you that it's not simple to implement but imho it doesn't go against the library main focus on lists as it is more of a presentational choice for displaying list elements.

https://strml.github.io/react-grid-layout/examples/0-showcase.html is missing some core features that my team is currently using in react-dnd-beautiful such as combining draggables. Moreover, animations and draggables collisions aren't as much refined as react-dnd-beautiful.

[nperichSYKES]

@atifsyedali Thanks for the link! That could be helpful for many needs. But one reason it would be nice to have rows, columns, and grids in a single dnd library is for easy dragging between lists of different layouts.

For example, I currently use react-beautiful-dnd to drag from a vertical "unsorted" list to various horizontal lists of categories. It works great and was easy to implement thanks to rbdnd. But I also have a case where I would drag from a list of items in a grid "detail view" to a vertical list that's the same type of thing but much more condensed.

[alexreardon]

Duplicate: #316

[alexreardon]

Locking this to avoid +1 spam. Please refer to #316 💃