angular / angular/components

feat(cdkDrag): cdkDragExclude to mark a part of the tree as should not be

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

説明

### Feature Description

Create a Directive (tentatively named cdkDragExclude) that when applied to an element does the effective inverse of cdkDragHandle. That element and it's children will not be able to be dragged/not cause the cdkDrag'ed item to be dragged.

As an alternative to a new directive, It should be possible to accomplish the same goal without adding a new directive by making it so that a cdkDragHandle that's disabled, inside another cdkDragHandle, (or a cdkDrag that's disabled inside another cdkDrag), will result in that element being un-dragable. As it stands, a cdkDrag in a cdkDrag will result in the parent one being moved, and a cdkDragHandle in a cdkDragHandle has no impact. I'm not sure how changing the interactions like that needs to be considered from an API stability point, and I'm also unsure if that's an acceptable option as it is not very intuitive.

### Use Case

This is specifically targeted at parts of a component/component tree that have interactive elements of their own. (or where one might wish there to be interactivity)

- Text inputs: Unable to highlight the text on an input with a mouse.
- Text Area: Unable to change the size of a text area input as dragging the anchor in the bottom right corner results in the node moving instead
- Sliders: Sliders become difficult/nearly impossible to use
- Simply Highlighting text: Highlighting text in an element becomes difficult as the node itself will move instead of allowing the text to be selected.

This was discussed previously in #12929 and there was a response of "You can use the cdkDragHandle directive to configure which element should be draggable". The complexity of certain draggable components makes this nearly untenable under some circumstances unfortunately.

If I need to disable dragging on a single sibling element, I have to add cdkDragHandle to all other siblings of that element, all siblings of the element's parent, the parents parent, and so on until I reach the root dragable element itself. That process alone does not account for any margin on the element, which would have to be replaced with margin elements that also have cdkDragHandle, or other such hacks.

This only gets more complicated and unweildly the more elements you have that require disabling of the dragging.

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

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

調査の方向性

まず、既存の cdkDrag ディレクティブと cdkDragHandle ディレクティブ、および issue #12929 のこれまでの議論を読みます。提案されている cdkDragExclude ディレクティブを、無効化されたネストされたハンドルまたはドラッグと比較し、除外された要素内でのドラッグを防ぎつつ、それ以外では通常のドラッグを維持するために必要な API とインタラクション動作を定義します。

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

評価

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

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

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