Allow combining without reordering

[alexreardon]

Some people would like to enable combining without allowing reordering within a list

[mattkrick]

hey @alexreardon happy to attempt a PR for this one. i noticed there was already an attempt that went stale (#1129).

Before i get started any guidance on general architecture that you'd like to see?

[DanielPower]

Re-posting my suggestion from #1506 here.

Currently we have isCombinedEnabled, which allows you to set whether or not items can be dragged on top of each other to be combined. And we have isDropDisabled, which prevents items from being dropped onto the Droppable entirely.

I think we can solve this issue (combining without reordering) without adding more props or complexity. My proposal is to replace isDropDisabled with isReorderEnabled. Then combining and reordering can be controlled individually. Disabling both will have the same behaviour as isDropDisabled={true} does now.

The result would have these four states, depending on the values of isCombineEnabled and isReorderEnabled:

1. isCombineEnabled={true} isReorderEnabled={true}: The list can be reordered, and items can be dropped onto one another. Behaves exactly the same as the current behaviour with isCombineEnabled={true} isDropDisabled={false}.
2. isCombineEnabled={false} isReorderEnabled={true}: The same as the default behaviour.
3. isCombineEnabled={true} isReorderEnabled={false}: Items can be picked up, and dropped onto one another, but will not reorder. Items will not animate to move out of the way. This behaviour is not possible currently, as far as I've been able to find.
4. isCombineEnabled={false} isReorderEnabled={false}: Works the same as isDropDisabled={true}

Adding an item to the list from another list, would also be considered "reordering", and would be disallowed in isReorderEnabled={false}.

[philipaarseth]

Is there any chance we could see an update on this? It seems like people have been wanting a similar feature like this since early 2018.

[mattkrick]

@philipaarseth FWIW, it's really, truly easier to build your own package to support this. this package has some beautiful patterns in place to learn from (namely snubbing HTML DnD for mousemove events, support for mobile), but it will only get you 80%. the rest (namely perfect animations & ungrouping) will drive you mad.

I built a collaborative grouping engine awhile back & put it in a react hook. perhaps it could be a starting point?

[Mykybo]

is this still not implemented? :(

[DanielPower]

is this still not implemented? :(

No, and it doesn't look like it will be any time soon, since the library is no longer actively developed. I'd recommend looking to another library or building something custom if you need this functionality.

[100terres]

If anyone has the time to the investigate and open a pull request, you can to it on this fork https://github.com/hello-pangea/dnd/issues/438#issuecomment-1328090710 of react-beautiful-dnd. PRs are more than welcome on our repo :slightly_smiling_face:

[jnorvell]

For my use case I would just like to be able to disable reordering on any given droppable. Regardless of whether or not combining is used.

[rbehal]

This worked for me. Hiding placeholder + disabling transform:

https://github.com/atlassian/react-beautiful-dnd/issues/374#issuecomment-569817782