Multiple droppables inside single draggable

[suryarsp]

Multiple nested droppables

In my scenario, I need a Draggable element to be dropped inside two or more Droppable containers. These droppable containers are nested say Example: Nested Array of Objects Group contains categories -> Categories contains sub-categories -> Categories contains Items && Sub Categories can also contain Items -> Items contains sub-Items

Draggable Element - Sub Item & Item Droppable Containers - Category, Sub Category & Item(it can contain sub item)

DND-issue-code.txt

I have tried in my code and what happens is that Draggable works only for inside droppable and doesn't work for outside droppables.

What I need to achieve is described in this diagram

Kindly help me to sort out whether this is possible or not using react beautiful DND

Version : "react-beautiful-dnd": "^11.0.5", "react": "16.7.0", "react-dom": "16.7.0",

[jai1331]

@suryarsp I'm looking for a solution for the same problem.

It will be N no of groups and each Group may have N no of items, Each items can be swappable/draggable to any other group., likewise we can make any group as a sub group. You can check the implmentation below, but I couldn't implement fully.

Sample demo https://codesandbox.io/s/pagebuilder-group-concept-poc-te6lu. Any work around on how to drag and drop Group 2 into Group 1 and make it as a subgroup of Group 1?

[suryarsp]

I have implemented this by not giving type to droppable.

Documentation

type: : A TypeId(string) that can be used to simply accept only the specified class of . s always inherit type from the they are defined in. For example, if you use the type PERSON then it will only allow s of type PERSON to be dropped on itself. s of type TASK would not be able to be dropped on a with type PERSON. If no type is provided, it will be set to 'DEFAULT'.

Ignoring type in droppable allows dropping any draggable element. Demo : https://codesandbox.io/s/nested-dnd-c8g6y I just have some CSS issue when I drag near the droppable, the dragged element gets far away from the dragged position whereas the dragged position is correct. I just need some corrections on how to handle those styling issues and it would work perfectly as expected. @jai1331

[buffge]

l have the same problem;

[collab-with-tushar-raj]

I have implemented this by not giving type to droppable.

Documentation

type: : A TypeId(string) that can be used to simply accept only the specified class of . s always inherit type from the they are defined in. For example, if you use the type PERSON then it will only allow s of type PERSON to be dropped on itself. s of type TASK would not be able to be dropped on a with type PERSON. If no type is provided, it will be set to 'DEFAULT'.

Ignoring type in droppable allows dropping any draggable element. Demo : https://codesandbox.io/s/nested-dnd-c8g6y I just have some CSS issue when I drag near the droppable, the dragged element gets far away from the dragged position whereas the dragged position is correct. I just need some corrections on how to handle those styling issues and it would work perfectly as expected. @jai1331

Please let me know if you have managed to solve this. I have a similar use-case. Thanks in advance !

[VladaIgnatyeva]

Did anybody solve this problem?

[Alx90s]

The devs dont support this lib anymore or just sporadically :(