Components: proposal:(@angular/cdk/drag-drop) Overlapping cdkdrop elements respect z-index

[kccsf]

Bug, feature request, or proposal:

Proposal - overlapping cdkdrop elements respect z-index

What is the expected behavior?

cdkdrop with highest z-index takes priority when an element is dragged over multiple overlapping cdkdrop elements

What is the current behavior?

_getSiblingContainerFromPosition uses this._positionCache.siblings.find so uses the first element found, regardless of z-index.

What are the steps to reproduce?

https://angular-92bnjh-jx5aoe.stackblitz.io

What is the use-case or motivation for changing an existing behavior?

cdkdrop elements that overlap are being used for a particular design that uses triangles adjacent to vertically flipped triangles.

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

@angular/[email protected]

Is there anything else we should know?

Overlapping cdkdrop elements are probably an unlikely use case!

[crisbeto]

I'm not sure how practical it would be to base the sorting on z-index since we'd have to make a lot of assumptions that may not be correct. It might make more sense to add an API where consumers can customize the sorting logic based on their use case.

[jelbourn]

Rather than using the CSS z-index, what if the drop zones had their own zIndex property?

[crisbeto]

I'm not sure the issue described here is necessarily down to zIndex. The problem is that, even though the elements are triangular, they're still inside a rectangular box which overlaps with the one after it.

[jelbourn]

Ah, I missed that part. Yeah, that doesn't seem like something the library could handle.

[johannesheucher]

@jelbourn @crisbeto
Apart from the triangle-use case: Are there any options to work around the problem of one drop zone overlapping another? If I drag an item into the inner drop zone, the "cdkDropEntered" and "cdkDropExited" events are called for both zones every time the mouse moves.

[crisbeto]

This should be handled by https://github.com/angular/material2/pull/14257.

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