React-beautiful-dnd: Allow combining without reordering

Created on 5 Jul 2019  路  4Comments  路  Source: atlassian/react-beautiful-dnd

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

new feature 馃帹

Most helpful comment

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}.

All 4 comments

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?

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}.

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.

@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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

heymartinadams picture heymartinadams  路  3Comments

alexreardon picture alexreardon  路  3Comments

crapthings picture crapthings  路  3Comments

erganmedia picture erganmedia  路  3Comments

alexreardon picture alexreardon  路  3Comments