Support lists with wrapping rows (Grid layout)

[RomanProkhodsky]

trafficstars

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!