Open SadiinsoSnowfall opened 2 years ago
This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.
You can find more details about the feature request process in our documentation.
Besides the feature request, is there any active workaround to detect when the container HTMLElement is no longer hovered over?
Feature Description
Currently, the CDK/Drag-Drop module is very opinionated about what it allows the developer to do: have multiple lists/containers that a dragged item will snap to. For example, the two events on
CdkDropList
that tell you the current container to which a dragged item will snap to arecdkDropListEntered
andcdkDropListExited
.However, because of the snapping functionality built into the module from the start, the
cdkDropListExited
event only fires when the item changes its linked container, not when the container HTMLElement is no longer hovered over (what we would expect fromdragEnter
anddragLeave
from the native browser API).While this makes the implementation and management of snapping containers much easier, it only complicates the implementation of non-snapping logic. Mostly because there is no easy way to know when a
cdkDropList
is no longer hovered.My proposal is to either (or both)
a) Introduce two new events in
cdkDropList
that would mirror the nativedragEnter
anddragLeave
events and would be triggered when a dragged item enter/leave the area occupied by the container's HTML element (the event mimickingdragEnter
would not constitute a duplicate of the already existingcdkDropListEntered
one because it is possible to drag the mouse cursor in and out of the container area multiple times while keeping the dragged item bound to it if no other container was hovered over during the operation).b) Introduce a new type named
cdkHoverTarget
for example, which would act as a non-snapping hover target (and possibly not a container). It would expose the two events reflectingdragEnter
anddragLeave
and would be used to know when the user has its mouse cursor over a specific element during a drag operation.Use Case
One use of such a feature that I can think of would be in implementing a file manager: when dragging a file over a folder to move it into that folder, one would not expect the file preview to keep saying "move to" when the folder is no longer hovered over. This use case requires the developer to be able to know when a possible drop target is no longer hovered over, which is not trivial to achieve using the currently exposed events of the drag-drop module.