[CdkDrag] Dragging the last item will break the structure of the list.

Bug, feature request, or proposal: Bug

What is the expected behavior?

List structure remains identical after drag/drop

What is the current behavior?

List structure breaks when dragging the last item in a list where the drop container is not the direct father (and when not using NGFOR)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-9xpwbj

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.0.4

Is there anything else we should know?

This bug is in the cleanup routine of the CdkDrag compoment, if there is no “nextSibling”, i.e. last item in drag container, and the drop container is not the father (direct parent) of the list it will append the dragged item to the container which is not the direct list owner.

This will not happend when using *ngFor because *ngFor will add a comment element after each list item which causes CdkDrag to think it’s not the last sibling.

---

I also think that the fact it doesn’t happen in*ngFor is a bug, the nextSibling should reflect the next draggable item but the code queries for any node… instead of element.nextSibling it should probably be element.nextElementSibling

---

[crisbeto]

Sure.

[shlomiassaf]

For anyone facing this issue, until resolved, the following gist contains a workaround for all issues in this PR + the ability to lazy bind a CdkDrag and a CdkDropList (i.e. out of scope binding between CdkDrag and CdkDropList as described in #14099)