Components: dnd: dragging/sorting item in the nested cdkDropList always goes to the outermost cdkDropList

[windisme94]

What are you trying to do?

Dragging or sorting inside/outside the nested droplist.
Allow items in the nested droplist sorting inside/outside itself, even drag into the nested droplist of nested droplist and vice versa.
P/S: All droplists are linked to each other.

The current behaviour is that when to start dragging a nested list item, it will instantly get and move to the outmost container/droplist instead of within the nested droplist. It takes the outermost container because of the cursor is also located in it and according to _getSiblingContainerFromPosition function, it will take the first sibling container (which is outermost container) and ignore the inner containers.
Also, the function only considers getting the siblings and ignores the current container itself causing that we cannot do any sorting in the nested container and always move to the first outermost container.

What troubleshooting steps have you tried?

I tried to modify the _getSiblingContainerFromPosition which is not recommended solution.
I do not know is there any way to achieve it but it works perfectly after I modify the function.
_updateActiveDropContainer should call _getContainerFromPosition which includes current container itself and also sibling containers, and resort it ascending order by the number of the droplist contains (find function will get the innermost container first instead of the outermost container).

Please advise. Thank you so much :)

Reproduction

We can only help if we can reproduce the problem ourselves.

https://stackblitz.com/edit/components-issue-dmuqfv?embed=1&file=app/zoo/zoo.component.ts

Steps to reproduce:

1. Items can be drag into another droplist.
2. Only items under the outer container can do the sorting.
3. When doing sorting for nested droplist items, it will move to the outer container.

P/S: Please ignore other buggy things since this sample code is to demonstrate for the mentioned issue only.

Environment

• Angular: 8
• CDK/Material: Drag and Drop
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows Server 2016

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

[windisme94]

@Splaktar thank you so much!

[heshamelsawaf]

Any news about this? Maybe a workaround or something.

[peebeebee]

@heshamelsawaf Just struggled a few days with this too.
If you can't get around with using another library (we ended up using https://swimlane.github.io/ngx-dnd/), the only real workaround is too flatten the list, and use multiple layouts based on the meta-data. It takes a lot more work, and it's not worth it imo.

[f1nality]

Would be great to have nested drag drop support

[crisbeto]

Duplicate of https://github.com/angular/components/issues/16671.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}