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 (mathieu.eveillard@gmail.com 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

[munichmule]

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

[munichmule]

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