Nested drop targets do not work correctly.

[henrikdahl8240]

Let's assume we take the example from the guide at https://material.angular.io/cdk/drag-drop/overview below the header "Transferring items between lists".

Here we have a div having the attribute [cdkDropListConnectedTo]="[todoList]".

We now do a very simple change, we edit that div and make a small hierarchy of drop targets by putting three divs inside each other, where they each have the attribute [cdkDropListConnectedTo]="[todoList]".

Now we should be able to drag items from the todoList and drop the items at any of the three divs making up the hierarchy.

Unfortunately it's always the outermost div which get's the drop and not the one below the mouse cursor. So, for example, if you drag an item from the todoList and release the mouse button above the innermost div, it's still the outer-most div, which gets the drop.

Shouldn't it rather be the div below the mouse pointer and not the outermost div?

I hope you may fix this, because it's rather difficult to drop at nodes in a hierarchy having the current behavior.

[henrikdahl8240]

Perhaps this is actually the same problem: #17119

[crisbeto]

Duplicate of #16671.

[angular-automatic-lock-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.}