angular / angular/components

[CdkDrag]: Allow out of scope binding with drop container

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

説明

#### Bug, feature request, or proposal: proposal

#### What is the expected behavior?
`CdkDrag` accepts `CdkDropListContainer` as an `@Input` (in addition to the current injection logic)

#### What is the current behavior?
`CdkDrag` accepts `CdkDropListContainer` from DI (optional) or through direct assignment.

#### What is the use-case or motivation for changing an existing behavior?
When `CdkDropListContainer` comes from DI it requires the drop container to be a direct parent of the drag element.

When working with dynamic content (table, tree, select, or any "portal like" components) it is sometimes not possible to have the container and the drag element in a parent/descendant relationship.

For example: In a `CdkTable` dragging a header cell left/right having the header row as the drop container. The row and cell are not defined as parent/descendant in the template and the view creators will not pass the proper injectables in such case.

The current implementation does not require a drop container, it's optional. So adding an `@Input` is quite simple. The init only happen when actual dragging starts so it shouldn't be an issue.

The `CdkDropList` will require some modifications because it uses a template query to get all of the child drag items it manages. This is also doable... Maybe by having a flag that defines the work mode or another directive that does not use a template query.

When a drag item is assigned a drop container it will notify the container so it can store a ref to it... doing the same when the drag is destroyed or disconnected from the parent drop container.

Thanks!

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

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

調査の方向性

CdkDrag と CdkDropList の実装を読み、まず依存性注入と子ドラッグの検出に関する動作を確認します。動的に割り当てられたコンテナがどのように接続および切断されるかを追跡し、既存の親ベースの動作を失うことなく、スコープ外のドラッグ/コンテナ関係をサポートできることを完了条件とします。

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

評価

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

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

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