Drag and drop with nested lists

[tnhu]

Bug or feature request?

Could be both.

Expected behavior

I have a nested list, DnD needs to be available on both the container and its content. The container is a vertical dnd list. The content of the container is another nested horizontal dnd list.

If put separately, they work fine.

When nested, vertical dnd works on the container level, but the horizontal dnd list does not.

I searched through this repository issues, but did not find an easy solution. Any hint would be much appreciated.

Actual behavior

Nested dnd is not working.

Steps to reproduce

Please look into codesandbox link below.

Browser version

Chrome 63/Mac.

Demo

https://codesandbox.io/s/1r48641304

[epferrari]

We're having the same issue, but with nested vertical lists. I see it's working in the StoryBook demo. Having access to that code would be helpful.

[alexreardon]

All the source code for the examples is here: https://github.com/atlassian/react-beautiful-dnd/tree/master/stories

[alexreardon]

I suspect the example is a setup issue. I'll try to take a look at it soon

[alexreardon]

I think I know what your issue might be. The parent is of the same type as the child. If you make the parent type seperate you should be fine. Right now they need to be seperate entities. It is probably worth adding this to the docs

[alexreardon]

The functionality works as you can see in our example. I am attempting to trace through your app to see what is going wrong

[alexreardon]

Okay, you had a few issues:

• You had nested DragDropContext's which is not supported
• You propbably want the droppables to have different types so that they are independent

I have done a small fix here:
https://codesandbox.io/s/1r48641304

Also, you are getting spacing issues due to using inline-flex. It does not play well with standard margin collapsing

[epferrari]

@alexreardon that link for your fix looks like it's still the original non-working code. Do you have another fork?

[alexreardon]

Whoops, here it is: https://codesandbox.io/s/vmm0nplz5y

[12tp12]

@alexreardon have a question about this case:
if I have a vertical list nested (I mean vertical list which inside there are vertical lists), can I drag and drop an item from of one nested list to another? I tried with you're example here and I couldn't drag the an Item from one list to another.

[rambabusaravanan]

@alexreardon,
As @12tp12 said, it would be more beneficial

• if a nested item in a list is droppable to another list
• if a nested item is droppable outside (in it's parent list)
• and vice versa

[YCMitch]

Sorry to pop in so late in the discussion, but can anyone confirm whether this is currently impossible?

It's sorta my own fault but I went ahead and built my app assuming it'd be able to tackle something like this, and now I'm not sure what my options are.

[wesleywong]

@alexreardon thanks for the demo https://codesandbox.io/s/vmm0nplz5y for nested drag and drop. But I have a question about this. is that possible to have different event onDragEnd={this.onDragEnd}. My sub component is not the same function as a parent, so sharing this event function is not workable for my work.

example
<verticalMenu onDragEnd={this.onDragEnd}> <horizontalFriendLists onDragEnd={this.friendDrag} /> <horizontalContactLists onDragEnd={this.contactDrag} /> </verticalMenu>

[alexreardon]

@wesleywong looks similar to #498

[debo07]

If this helps anyone - https://codesandbox.io/s/5v2yvpjn7n

Explanations can be found here - https://stackoverflow.com/questions/52814011/nested-drag-and-drop-with-react-beautiful-dnd/54970040#54970040

[elibenjii]

https://codesandbox.io/s/vmm0nplz5y is not working for horizontal

[12tp12]

@nielsDom got the same problem

[Utopiad]

If this helps anyone - https://codesandbox.io/s/5v2yvpjn7n

Thanks @debo07 , you just made my day.

[hellocaio]

I followed @debo07's answer, anyone else getting this warning messange?

react-beautiful-dndDroppable: unsupported nested scroll container detected.A Droppable can only have one scroll parent (which can be itself)Nested scroll containers are currently not supported.We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131👷‍ This is a development only message. It will be removed in production builds.

[markdon]

@ColdTuna Sounds like you have nested scroll containers, maybe scrolling at an overall level and scrolling inside each of your lists. That's a different issue to this, #131

[DanielWFrancis]

If this helps anyone - https://codesandbox.io/s/5v2yvpjn7n

You're a hero for real mate

[dev-assassin]

@alexreardon
https://codesandbox.io/s/vmm0nplz5y
it works for me.
but i'd like to move horizontal item to outside vertical item.
for example. i tried to move item10 to next to item 5, but i couldn't move it.

and in your case, you got items in horizontal dnd with using getItems() function.
but in my case, items are from api. (for example, maybe there are about 10 items).
i'd like to show only 3 items in one horizontal line.
and others will be nested in next horizontal line.
so in my case, i'd like to use vertical and horizontal dnd at the same time.
I searched lots of issues and examples, but I couldn't find them.
please let me know, if you have that example in your package.

[nicholasangks]

https://codesandbox.io/s/5v2yvpjn7n
I follow this example exactly, but when I drop the nested item, it keep fall back to it original position. Anything that I missed out?

[DeolaJ]

@dev-assassin I worked on something similar for nested lists recently and it worked. So I created this minor project to help explain what I did. I hope this helps.
https://nested-dnd-deolaj.netlify.app/
https://github.com/DeolaJ/nested-dnd

[moshe-l]

@dunchaseme
I have the same issue. did you solved this?

[collab-with-tushar-raj]

If this helps anyone - https://codesandbox.io/s/5v2yvpjn7n

Explanations can be found here - https://stackoverflow.com/questions/52814011/nested-drag-and-drop-with-react-beautiful-dnd/54970040#54970040

@debo07 Thank you so much for this. I have few additional use cases here :-
1- SubItem 10 content can also be dropped to main canvas, so the main canvas will have Item 1 content, Item 2 content and SubItem 10 content. ( Of course, SubItem 10 content will then not be the part of nested items.
2- Item 1 content can also be dropped inside Item 2 content. Therefore, canvas will then have only Item 2 content.

I tried by not setting the type for any of the Droppable but the css was drastically disturbing the moment I start slight dragging of any of the nested item.

Can you please suggest how I can achieve this ? This is really needed for my project and in high priority. Thanks in advance !

@alexreardon Please provide your valuable suggestions here. My use case is pretty similar to #1001

[DeolaJ]

@Tush2890 I worked on both use cases with horizontal lists in my earlier comment. Was that helpful?

[montassar-vaionex]

how i can aplly this logic with data has 4 levels ?

[Subhwebninjaz]

@collab-with-tushar-raj @alexreardon @DeolaJ @debo07 @tnhu
Hi guys I am facing similar to same issue , My scenario is little complex . Working in Next js.
if you see the attached screenshot

Depth 0 question is : Do you have Card??
Depth 1 questions are : "Card Type ?" and "Card Company?"
Depth 2 questions are : "which Bank" and "CVV number"
Depth 3 question is : "Specify your bank"

Now in Depth 0(Root Level) I can easily reorder the questions also in Depth 1(Child Level) I can easily reorder the questions with the help of react-beautiful-DND but after child level I mean after depth 1 in Any depth i am not able to reorder the questions or items with DND .

Getting wrong destination in when i tried to reorder nested child from depth 2 , but perfectly working in depth 1.
const onDragEnd = (result) => {
const { source, destination } = result;
console.log(source, destination)
}