fix(cdk/drag-drop): support for nested drop containers (#16671)

[soren-petersen]

trafficstars

Fixes a two issues with nested drop containers. The first fixed issue is that the elements of cdkDropListConnectedTo previously had to be ordered correctly to support moving items into an inner drop container. Sepcifically, inner drop containers had to be listed before their outer ancestors. The second fixed issue is that items of an inner container could not be re-ordered without moving the item out of the container and then back in.

Fixes #16671

[google-cla[bot]]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[soren-petersen]

@googlebot I signed it!

[soren-petersen]

First of all, thank you for constructive feedback!

On top of the other comments, we definitely need some unit tests to ensure that things work as expected. It would be nice to have an example in the dev app as well so nested dragging can be tested manually.

With respect to unit tests and an example in the dev app, I'm sure I would be able to put something together. Unfortunately, I would need to spend quite a bit of time to figure out how it all works. At the moment, I have no idea where the dev-app is located, let alone how to add an example. Nor am I familiar with the unit test framework. Is there, perhaps, someone with more experience as a contributor who could support me with this?

[crisbeto]

I wrote most of the drag-drop module so I can help with it. To run the dev app, you have to install the dependencies by running yarn and then yarn dev-app will start the server. As for the unit tests, you have to run yarn test drag-drop. The dev app for the drag-drop module is in src/dev-app/drag-drop/drag-drop-demo.ts and the unit tests are in src/cdk/drag-drop/directives/drag.spec.ts.

[peternixey]

Really excited to see this go in guys as it relates directly to a big requirement in my current project. Thank you for your work @soren-petersen and @crisbeto. Any ideas on what version of Material it might be expected in? It would be brilliant to start using it.

[henrikdahl8240]

@crisbeto So still nothing has been done to fix the issue "The second fixed issue is that items of an inner container could not be re-ordered without moving the item out of the container and then back in.". There is no workaround for this. I would like to suggest an alternative approach, as you wrote "I wrote most of the drag-drop module so I can help with it.". My suggestion is, that you just define a unit test yourself which verifies that the re-ordering can be done. This unit test will fail because it doesn't work and then you just correct the drag-drop module and afterwards the unit test will succeed. This problem has existed for years, wouldn't it be an idea to finally get it fixed? I don't know how your drag-drop module works, but I use it and it works fine in many regards, however not in this regard! Isn't it quite simple, if the user is dragging it over it's own droplist, and sorting is not turned off, it should be reordered, otherwise it should work as usual? By the way, I think it should rather be named re-ordering than sorting.

[diego-rapoport]

Is there any hope that this will ever be the solution? Or that there will be any kind of solution for this kind of feature? Should I try another approach? Any ideas?

[ankit9015]

@crisbeto Can we please get this issue fixed, its been 3 years since people have been encountering this issue.

Would really appreciate if you could spare a little bit of your time to resolve this.

[squelix]

We have this issue too, can you resolve this issue ?

[andrewseguin]

Closing this particular PR since it has gotten out of sync with the repo and still needs tests added. We encourage anyone to reopen this PR with tests so we can get this merged in

[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.}