atlassian
Multiple droppables inside single draggable
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)
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",
@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?
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 <Draggable />. <Draggable />s always inherit type from the <Droppable /> they are defined in. For example, if you use the type PERSON then it will only allow <Draggable />s of type PERSON to be dropped on itself. <Draggable />s of type TASK would not be able to be dropped on a <Droppable /> 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
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 !
