React-beautiful-dnd: Support lists with wrapping rows (Grid layout)

[RomanProkhodsky]

Bug or feature request?

Feature request

Expected behavior

When I have a Droppable container with horizontal layout and limited width (let's say it fits 3 draggable items) and height (let it be double height of a draggable item), I'd like to have an ability to drag and drop items in 2 rows inside the container when the number of items is more than 3.
So the items will fit the actual size of the container without scrolling via flex wrap, like on the picture.

Actual behavior

When I move "Item4" to the place of "Item3", both "Item2" and "Item5" are being moved.

[alexreardon]

Can you please link to a standalone example? Ideally a codepen. Also, keep in mind that wrapped lists is currently not supported

[RomanProkhodsky]

Here is a fork from your example with horizontal list on codesandbox, demonstrating this issue:
https://codesandbox.io/s/q5lq71m96

[alexreardon]

Thanks @RomanProkhodsky!

This is the line causing issues: "flex-wrap": "wrap",

Currently we do not support wrapped lists. We may look into supporting this in the future

[RomanProkhodsky]

Are you planning to support something like this?
http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=7vo78r

[crapthings]

@RomanProkhodsky sortable hoc is cool

but it only support same width & height container

https://github.com/clauderic/react-sortable-hoc#grid-support

i try to make something like this

after tried several dragging & sorting libs, only jquery ui works.

but i want react

[maryokhin]

Really cool library, shame flex wrap is not supported :(

[mrlubos]

+1, this is the single issue preventing us from adopting this library!

[sag1v]

@alexreardon Are you considering supporting this?
By the way, i think __Not supporting wrapped lists__ should be stated in the docs or readme, maybe in the _"Not for everyone"_ section.

[sag1v]

Thanks @alexreardon, this is good to hear.
Though i'm a bit confused, which one of these is the relevant one for wrapped list support?
Maybe i can try to help

[alexreardon]

My apologies, I got confused. There is no plan on working on this for now. I mistakenly thought this was the virtual list issue @sag1v

[sag1v]

@alexreardon Aw that's bad news for me, thanks anyway.
BTW, i strongly think you should consider my comment above:

i think Not supporting wrapped lists should be stated in the docs or readme, maybe in the _"Not for everyone"_ section.

I think its a popular use case and a deal breaker for this library usage. knowing that this is not supported could of saved me some time (and for others i guess).

[alexreardon]

I also think it is worth calling out if it is a common stumbling block.

I am not closed to supporting wrapped lists. However, it falls outside of what we are still trying to deliver success on: lists and lists of lists.

[sag1v]

@alexreardon Thanks, so basically you want it to be something like an RFC?

[snackycracky]

a list as you see it, nested or not, can be visually wrapped. Its as simple as this.

[wesleywong]

Hi @alexreardon, any planning to support this wrap issue? Horizontal with multiple rows seems quite a common use case. I'm working on the preview uploaded image and let users arrange the order but seem I can't use this library to achieve this objective.

[mathieueveillard]

Hi,

Horizontal drag and drop with multiple rows can be achieved using multiple Droppables and a little bit of computation. However, the user experience is not so smooth as it might be if it was a native feature.

I would also have expected such a feature from this library, which remains excellent besides and offers features that concurrent libraries do not implement (multidrag, combining items etc.).

I should be able to share some code within a few days.

Regards

[ouoru]

I suggest you guys check out react-sortable-hoc if you need this functionality. Super easy to implement, and does not require a global wrapper.

[alexreardon]

We do not plan on supporting it soon. Here is what we are working on

You are welcome to fork or use react-sortable-hoc if that suits your immediate needs 👍

[mathieueveillard]

Hi,

You can have a glance at the following HOC: https://github.com/mathieueveillard/portfolio/tree/master/spa-admin/src/util/ListManager/withMaxItems. It is an adaptation of react-beautiful-dnd for wrapping-rows lists. Each row is handled as a Droppable, with some simple maths to convert a list into rows and backwards.

If anyone is interested, I can make an npm package of it.

Regards

[cilvet]

Coincidentally I've been looking for something like this, @mathieueveillard , what a coincidence you just posted it! thanks!

[kwayebopp]

@mathieueveillard, definitely make an NPM package when you are able. It seems like a lot of people want this functionality (myself included)!

[mathieueveillard]

@mathieueveillard, definitely make an NPM package when you are able. It seems like a lot of people want this functionality (myself included)!

I'm on it!

[mathieueveillard]

@cilvet @kwayebopp: here it is!
https://www.npmjs.com/package/react-beautiful-dnd-grid
Your feedback is welcomed!
I'll improve the README.md and add screenshots in a few days.

[ouoru]

@mathieueveillard this looks awesome!! just getting around to testing this for my own purposes. I appreciate the onDragEnd attached to the ListManager itself, and the startIndex/endIndex are good enough for my uses.

One question, it works for me using your test array of
const list = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
but I doesn't seem to work for me when I use arrays like
const list = ['a', 'b', 'c', 'd']

Do my arrays need to be filled with objects with the "id" attribute? That would seem very limiting, but I keep getting the error "Draggable requires a DraggableId"

Thanks!

[mathieueveillard]

Thanks @ouoru for pointing that, you're definitely right.
I've created an issue and will fix that quickly : https://github.com/mathieueveillard/react-beautiful-dnd-grid/issues/1

[cilvet]

@mathieueveillard How would you go about making the item count adaptable to the screen width?

[mathieueveillard]

@cilvet I suggest we move to the react-beautiful-dnd-grid repo.
I've created an issue re your question: https://github.com/mathieueveillard/react-beautiful-dnd-grid/issues/2
Thanks

[alexreardon]

Very cool @mathieueveillard! Perhaps we could call out the library in our docs?

[alexreardon]

Also, do you have an example anywhere I can play with?

[mathieueveillard]

Thanks, @alexreardon!

Very cool @mathieueveillard! Perhaps we could call out the library in our docs?

I would love to!

Also, do you have an example anywhere I can play with?

I'm on it!

[kwayebopp]

@mathieueveillard is it possible for your library to support for the isCombineEnabled behavior?

[mathieueveillard]

Here it is, @alexreardon and all: https://stackblitz.com/edit/react-beautiful-dnd-grid-demo

That a start, but to be honest, I'm not satisfied with the result: look at what happens when you drag and drop the item number 0 between items number 3 and number 4... I wish the item splitting would adapt while the user drags, without waiting for the drop event.

Any idea? I'm happy to discuss that.

Thanks

[mathieueveillard]

@mathieueveillard is it possible for your library to support for the isCombineEnabled behavior?

Hi @kwayebopp, I guess yes that's definitely possible. However, I feel that the point I raised in my previous comment might change the actual implementation significantly and should be handled first.

I've filed an issue: https://github.com/mathieueveillard/react-beautiful-dnd-grid/issues/3

Thanks

[alexreardon]

Perhaps we could set up a chat @mathieueveillard!

[alexreardon]

What is the best channel to reach you on?

[mathieueveillard]

Hi @alexreardon, sure that would be good: I suggest we chat via Skype ([email protected] or live:mathieu.eveillard_2). I'm based in Paris, so I guess your morning or noon would be convenient for you?

[mathieueveillard]

https://github.com/mathieueveillard/react-beautiful-dnd-grid/issues/4

[Arkellys]

Any new about this?

[mathieueveillard]

Hi @Arkellys,

At this stage, we couldn't find a way to smooth the user experience in the case mentioned above. I've drafted something but had to rollback unfortunately. Help is wanted!

Regards

[h15ter]

The problem is huge really. In responsive web we use responsive lists. You can't just say you support horizontal lists if you don't support wrap in 2019. It should be a big red disclaimer on the very first page.

[alexreardon]

It would be great to get time to work on it

[h15ter]

Cmon guys, there are so many requests for it since the beginning of 2018 :)
I understand we can't demand anything from open source project, and your DND solution is great already for many many use cases. Thanks a lot! I really enjoy it.
Still this multiline list support is a killer feature. I've explored maybe 5 top-rated dnd-components and none of them does it properly. If you finally implement it, you'll be my rockstar # 1 :)

[mathieueveillard]

It would be great to get time to work on it

Hi @alexreardon

With react-beautiful-dnd-grid, I've made this attempt of a package that would complement react-beautiful-dnd and allow the latter to stay focused on its primary concern.

However, I found there was a limitation by design, as expressed in this issue. Therefore, I do not plan to make further developments on react-beautiful-dnd-grid.

But if you're willing to add this feature to react-beautiful-dnd, I would be happy to help, since for all other aspects, it is by far my favourite drag and drop library. I could try and save time for this in July.

Please let me know

Regards

Mat

[alexreardon]

What sort of api exposure would you need?

[alexreardon]

@mathieueveillard I am trying to organise an alternative conversation tool for us to trash this out a bit

[alexreardon]

I set up a channel on Reactiflux to discuss: https://discordapp.com/channels/102860784329052160/586404055689986058

[alexreardon]

Come say hey @mathieueveillard

[akshaygoyal88]

I am using react-grid-layout and react-beautiful-dnd together to achieve similar kind of functionality
Here is the poc https://grid-layout-with-reactbeautifuldnd-j022j.codesandbox.io/
Team what are your suggestions on it?

[crapthings]

@akshaygoyal88

the position broken after drag into other column

and i think it would be awesome if we can drag item into column from right panel immediately, not just drag main area then column

[akshaygoyal88]

@crapthings Please check it again as I have fixed it.
Drag and drop is required to get the item's list in which its dropped.
https://codesandbox.io/s/grid-layout-with-reactbeautifuldnd-j022j

[mathieueveillard]

Come say hey @mathieueveillard

Hi @alexreardon,

Sorry for the late reply, I've been overwhelmed with work those days.
I tried to join the channel but it looks like no room is set up.
In case I've created a "react-beautiful-dnd-grid" server with a "general" channel that you can join : https://discordapp.com/channels/589926106853933061/589926106870710345

Regards,

Mathieu

[mathieueveillard]

What sort of api exposure would you need?

@alexreardon

I need to dig a bit further by reading the actual code of react-beautiful-dnd, but at a first glance I would need to be able to update the position of all items within the grid before the drop event. There's maybe nothing more to add to the API of react-beautiful-dnd because there is already this onDragUpdate hook, but I suspect making DOM updates at this very moment would mess with the internal representation that react-beautiful-dnd has of it. What do you think about that?

[alexreardon]

It could get messy, but it might be worth giving a go and see how far you get

[alexreardon]

Start down that path and see what we might need to support it better if you hit friction

[alexreardon]

Something like a 'onDropStarting' responder or similiar

[mathieueveillard]

It could get messy, but it might be worth giving a go and see how far you get

Sure, I'll do that and will keep you posted (hopefully within a few days)

[samtimalsina]

Any movement on this issue? I'd like to help if possible.

[ketysek]

Uff ... when I used this library in my project, I supposed that something like this wouldn't be a problem. Now I'm in situation, where we really need DnD grid layout and it simply doesn't work :-( I don't want to remove library and use alternative, so any progress on this issue?

[erikdjan]

Yeah, grid layout would be killer-feature. I am noname developer but can help if needed.

[artawood]

Same here. I'm working on a project that needs the grid layout as well. Willing to help as well.

[petermikitsh]

If anyone does consider something similar to @mathieueveillard's approach, I wanted to raise attention to a side effect of using an array of Droppable's: the accessibility labels need to be re-worked.

Eg., if I swap 4 with 3, VoiceOver announces I moved the item from position 2 to 1, but it actually moved from position 5 to 4 (when accounting for the items in the preceding Droppable).

[mathieueveillard]

Same here. I'm working on a project that needs the grid layout as well. Willing to help as well.

@artawood, @petermikitsh and others,
The approach I've suggested (based on an array of Droppables) suffers IMO a severe limitation: when dragging and dropping an element from one Droppable to the other, the content of each Droppable is not updated before the drop finally occurs. Here is an example:

Initial state:

0 1 2
3 4

Drag (3) in order to insert it before 0 (intermediary state, during drag, before drop):

(3) 0 1 2   // => huge drawback, isn't it?
4

Final state:

3 0 1
2 4

But we wish the component renders in the intermediary state as follow:

(3) 0 1
2 4

Given the public API exposed by react-beautiful-dnd, I see no way to implement this. Still, I'll be glad to discuss the point with whoever has a fresh idea and is willing to help (by the way, thank you @artawood!)

[drinksong]

Any movement on this issue?

[hsluoyz]

Any update?

[JeremyEllingham]

I was kind of surprised this wasn't a supported feature out of the box, seems like there's a lot of requests but obviously there just hasn't been the spare resources to get it implemented. I've had a look at various CSS hacks but not getting far on that front, I'll take a look at some of the other attempts and see what I can come up with.

edit: 'flex-wrap: wrap' is the right CSS but completely messes up the functionality. I also tried react-beautiful-dnd-grid but it wasn't quite right and I don't have time to hack around with it so looks like 1 row scrolling it is.

[jasp402]

@crapthings Please check it again as I have fixed it.
Drag and drop is required to get the item's list in which its dropped.
https://codesandbox.io/s/grid-layout-with-reactbeautifuldnd-j022j

@akshaygoyal88 I find work on something very similar to what you have created. but I must be able to pass the elements between lists. Maybe you have the same need. If so, let me know and we could work it together.

I also need to define the number of columns. In your case the list occupies the entire width of the screen. I need 3 columns.

---

react-grid-layout 👏 is very complete for the grid. But it lacks everything else.
I hope you can add this functionality to react-beautiful-dnd 🥇

[akshaygoyal88]

@jasp402 I mailed you on [email protected] I would be happy to work.

[Aarbel]

@alexreardon any evolution of grid layout plans ?

[lochstar]

Just in case anyone else is trying to find a solution, react-sortablejs works with wrapping rows and dragging between multiple lists.

[nicoladl]

@lochstar thanks.
Also react-sortable-hoc works with a grid layout.

[lochstar]

@nicoladl yep, I was originally using react-sortable-hoc but it doesn't have true multi-list support. react-sortablejs works really well with grids and dragging between lists.

[Aarbel]

@mathieueveillard do you have some news ? :)

[Kaeon]

@lochstar thanks.
Also react-sortable-hoc works with a grid layout.

Thanks for this! After comparing react-sortablejs and react-sortable-hoc I switched from this library to react-sortable-hoc for grids. Really simple to implement, grid system works great and bundle size decreased a lot.

[casvil]

@JeremyEllingham here you have a fantastic repo https://github.com/clauderic/react-sortable-hoc

[ftruzzi]

react-sortable-hoc supports wrapping but does not support drag and drop between two different lists.

It looks like react-sortable-js does, but the drag animation does not look as good.

If react-beautiful-dnd supported this and https://github.com/atlassian/react-beautiful-dnd/issues/270 it would gain a lot of users, as there is currently no way of beautifully drag and dropping items between two horizontally-centered wrapped lists.

[zhangwudi886]

so sad

[isaiahtaylorhh]

I would also be in favor of calling out the fact that you do not support this explicitly on the readme. I got well into development with this library before I discovered that this behavior isn't supported, now I've got to undo it.

[tuval10]

@isaiahtaylor same here buddy :(

Guys, your library is amazing, and I wish I could use it - but my use case as many other is wrapped rows.
I understand that it's not prioritized for now - you can do whatever you see fit - although as you can see there is a demand for that feature.

But a big :-1: on not putting it in the Readme, even after people requesting it and wasting my and other people's time

[dmitriy-komarov]

Spent much time until discovered this component does not support grids (by flex-wrap: wrap).
Now I've removed all new code and continue with SortableJS

Please mention this issue in README.
Its a blocking issue for many developers.

[AdamSalma]

I solved this problem by combining both react-beautiful-dnd for dragging-dropping into a grid and react-sortable-hoc for the grid itself.

The libraries are compatible with each other, just remember to separate with divs

[oyeanuj]

@AdamSalma Intriguing, could you share a gist or an example?

[imyzf]

Please add Not supporting wrapped lists to README!!!!

I spent many time to watch video and read docs to learn how to use it, and spent many time to write demo. Finally I found this issue, I have to give up after wasting a lot of time.

[marissasnihur]

I can also confirm that I used this library with the assumption that wrapping would work, and found absolutely no documentation that it wouldn't until I found this thread after doing the majority of my work. Please add this to your README if you don't plan on supporting so it'll save everyone else a headache.

[iamhuynq]

Finally found this and so sad, goodbye beautiful library

[skv1991]

So cool library, but what about sortable wrapping lists (grid in flexbox)??
Spend many hours working on this, but this feature is not avalibale :( Blocking development for me :(
Why not to make this possible? Sad to hear hrom you, Atlassian.

[peter064226]

it's so sad that i spend lots of time to find out it's doesn't support grid , so i need to remove all the react-beautiful-dnd related code and rewrite it using react-sortable-hoc .

[seanstrom]

React Beautiful DND is a great library, and was happy with it for some time until I tried to implement some sort of grid system with it. Unfortunately I wasn't able to fully cope with the limitations and had to migrate to another library. Luckily I came across a more grid/masonry layout library that handles DND too, it's called Muuri. It also has a React wrapper called Muuri-React. So far both are working well but have some rough edges, maybe others will find these useful too 🙏

[isaiahtaylorhh]

@atlassian I'd like to reiterate that the issue here is not that the grid feature is missing, but that you're burning the time of others by not being more up front about the limitations of this library. This thread serves to show that lots of people expect this feature to exist and make a time investment in this library before having to back out of all that progress. Due to the nature of development, that backout is not always as simple as reverting a few merges or scrapping a branch. Forward motion can be made on other features during that integration, so de-integrating can be slow, manual process in which a lot of us are saying, "come on Atlassian, really? Just put it in the readme!"

[crapthings]

here's another one

https://gridstackjs.com/

[caleb-harrelson]

We were already using the library in another part of our code, so of course we would use it for a new feature that needed to rearrange things in a grid. I have spent several days trying to debug my code since I so strongly believed react-beautiful-dnd would _of course_ support this. Now I'm actually curious if the number of hours burned by this limitation not being in the README is greater than the number of hours it would take to support it :p

Please put it in the README.

[isaiahtaylorhh]

@alexreardon @atlassian It's been over a year since there has been any official word on this. All we're asking for is that people's valuable dev time not be wasted by lack of a readme call-out. This is quite rude to everyone who comes across this library :frowning_face:

Agree with @caleb-harrelson; wasted dev hours going down this path only to discover lack of support now exceeds implementation time. WAY exceeds time to put it in the readme. Why aren't we submitting PRs? We can but I assume you want to control the language on the readme.

[TrySound]

@isaiahtaylorhh Man, I never worked in atlassian and only contributed to build setup in this project. I'm not the one who you should "at" for sure.

[isaiahtaylorhh]

Thanks, removed your tag.

[michaeljblum]

Echoing @isaiahtaylorhh and others' sentiment that the readme could do with being more forthright/exhaustive with regards to what this library either does not currently support (wrapping rows issue mentioned here) or is not intending to address (axis locking, mention of which I guess was inexplicably removed from the main readme some time before I started using this lib).

With that said, take caution when moving to other libraries. react-beautiful-dnd still provides far better dnd functionality/animation than SortableJS, while react-sortable-hoc (which looks awesome on first glance) not only doesn't support multi-list dragging, but also seems to be abandoned - it's making use of legacy and deprecated API that will throw warnings aplenty in console, etc.

[NadavCohen]

Me and my company needed this very much, and I was aware that this is a long unsupported feature, so I decided to step up and offer my hacking skills to make this happen.
With some minor changes and adding a new direction option - "grid", I believe I got very close.

This Is where I'm at right now:

The solution is based on the better flex-wrap grid with a single droppable rather then having multiple droppables to serve as rows. I believe It may be able to work on css3 grid as well.

Of course this is merely a POC, even though performance is great there are some bugs and weird movements, so I was hoping for some help to try and make it production ready or an official feature.

The modded version can be found at https://github.com/NadavCohen/react-beautiful-dnd

I edited the "single horizontal list" entries in the storybook for demonstration.

[mhuggins]

@NadavCohen Heads up that your link is pointing to the wrong URL when clicked. Correct URL is here: https://github.com/NadavCohen/react-beautiful-dnd

[NadavCohen]

Fixed 👍

[alexchoiweb]

@NadavCohen I'm trying to install your commit as a npm package but having some trouble. Any tips on the best way to test your commit as a package?

[NadavCohen]

Hi, you can do
yarn add react-beautiful-dnd@npm:aligned-rbd

[alexchoiweb]

@NadavCohen Do you mind sharing a repo of that POC? Having some trouble recreating the grid and would like to know where I'm going wrong

[NadavCohen]

@alexchoiweb I edited the "single horizontal list" storybook for the POC - you can fork my repo and run storybook to see it

You can look in the commit to see the changes I made.

[Douglas-Pontes]

so sad that it doesn't support this feature its kinda lame, thank god I found this! I would've spent a lot of time trying to find a solution :)

[Alan-Fisher]

@NadavCohen consider creating a PR pls :)

[NadavCohen]

@Alan-Fisher I actually wanted to do it along with the post here and completely forgot! thanks for reminding me - https://github.com/atlassian/react-beautiful-dnd/pull/1992

[Alan-Fisher]

@NadavCohen oh that's really cool

[sylvainar]

That's nice, hope it'll be merged.

[OtacilioN]

Hey @NadavCohen could you post a snippet about how you used it?

I pointed to your fork, and tried with this css:

display: flex; flex: 1; flex-wrap: wrap; padding: 4px 12px;

but didn't work for me.

[NadavCohen]

@OtacilioN To create a flex grid, there are additional measures you'll have to take.
You need your wrapper element to have flex-direction: row; and your child elements to have appropriate flex sizing properties. You can use this for a reference: Mastering Wrapping of Flex Items

As for how I did it, here is a link to the storybook entry that I modified:
author-app.jsx
author-list.jsx - Make sure to look at the DropZone styled component.

[OtacilioN]

@NadavCohen thank you so much!

It worked perfectly, and the only change that I had to do in my code was changing from direction='horizontal' to direction='grid'

I think @alexreardon should consider adding this to the official library.

Thanks again Nadav, you save me so much time, if you travel to Brazil one day, I owe you a beer or a soda.

[Extnow]

Hey @NadavCohen thank you for this solution

But I noticed that an element in a row cannot be moved to the far right place in that row

Can you pls fix this? (I write here because there is no way to create issue in your repo )

[artawood]

Could be an issue with the placeholder. Will spend some time looking into it.