React-beautiful-dnd: Add combining support (aka grouping, merging)

Created on 18 May 2018  路  8Comments  路  Source: atlassian/react-beautiful-dnd

Adding the ability to hover a Draggable on top of another one.

  • This would change the sliding of items to allow for a period of overlap
  • The onDragUpdate > DragUpdate type would need to be updated to include the grouping information
  • The onDragEnd > DragResult type would also need to be updated
  • keyboard interactions would need to be aware of grouping
  • A Droppable would need to opt into allowing it's child Draggables to be groupable (still need to figure out what the opt in story looks like)
new feature 馃帹 medium 馃憤

Most helpful comment

Making progress

grouping-teaser

All 8 comments

Really interesting idea! I wonder if this would enable the following use case:

Let's say you have a sidebar on the left with a list of projects, which can be reordered. On the right side, you have a list of items within the currently selected project, which can be reordered as well. You can also drag an item to the sidebar, hovering over a project, at which point it will be moved to that particular project when dropped.

I think this would require some kind of groupableType prop on Droppables. The Droppable of the sidebar would be something like

<Droppable type="project" groupable={true} groupableType="item" />

What do you think @alexreardon ?

Also, note that the Trello link you shared is not working, it shows the following error:

Card not found.
This card may be on a private board. If someone gave you this link, they may need to invite you to one of their boards or teams.

The trello board is private. Lame that the trello link is public.

API to be confirmed, but yes, this is to do with allowing grouping of draggables

Making progress

grouping-teaser

Looks awesome, @alexreardon !

Would it be possible to add some kind of attribute like groupableType, so you can only group items of a certain type on an item? That would be really helpful for the use case I described above.

grouping-with-keyboard

Combining with a keyboard 馃憤

I am really looking forward for this feature, since it will be one of the core actions of my project. You said on another issue that this will be landing on version 10. When can we expect this version? Any approximate date?

Nice one. Looking forward to using it for feature I plan to build.

Was this page helpful?
0 / 5 - 0 ratings