angular / angular/components

feat(drag-drop): Make it easier to know when a CdkDropList is [no longer] hovered

オープン
#24,814 コメント 3 件 リアクション 11 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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 are `cdkDropListEntered` and `cdkDropListExited`.

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 from `dragEnter` and `dragLeave` 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 native `dragEnter` and `dragLeave` events and would be triggered when a dragged item enter/leave the area occupied by the container's HTML element (the event mimicking `dragEnter` would not constitute a duplicate of the already existing `cdkDropListEntered` 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 reflecting `dragEnter` and `dragLeave` 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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

CDK/Drag-Drop モジュールと、既存の CdkDropList の cdkDropListEntered イベントおよび cdkDropListExited イベントから始めます。ネイティブ形式の enter/leave イベントを追加するか、スナップしない別個の hover ターゲットを追加するかを判断し、ファイルマネージャーのユースケースを完了条件として検討します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。