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