angular / angular/components

[Cdk drag-drop] Expose dragRef._pickupPositionInElement

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

説明

Hello everyone,

I would like to ask for a small but nice to have feature in the CDK drag-and-drop module.

#### Feature Description

DragRef has a private member called `_pickupPositionInElement` that holds what it says : the { x, y } position where the user began a drag event. I would like to have this property public, or made accessible with a method instead of typing the following code that would break without any warning should the property change name : `(dragRef as any)._pickupPositionInElement`

#### Use Case

To create a custom control, I need to be able to drag items, and snap them to a "container". Dragged items are above the container, with a `position: absolute` styling. For that, I only use the `cdkDrag` directive, and the `cdkDragConstrainPosition` input.
In the method, I then search for the container-column to snap to, and return its position + the pickup position in element. If I don't add the pickup position, then the element does not snap as it should : I want the top left corner of the dragged element to be snapped to the top left corner of the column.

I created a stackblitz to show exactly what I am talking about : [here](https://stackblitz.com/edit/components-issue-wm4ugv)
Use the slider to toggle On/Off the use of `_pickupPositionInElement` and see that, when toggled off, the dragged element snaps based on where the drag has began (which is wrong for my use case). When toggled On, everything runs as it should. It is just that the ` as any` cast makes changes to the DragRef interface a potential invisible and undetectable breaking change for me…

Thanks for reading me and have a nice day!
Cheers.

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

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

調査の方向性

まず、リンクされた StackBlitz を開いて CDK Drag-and-drop の DragRef API を読み、特に cdkDragConstrainPosition と組み合わせた _pickupPositionInElement の使用方法を確認します。cdkDrag ディレクティブがどのように DragRef を公開しているかを追跡し、ピックアップ位置をどこから公開アクセスできるようにすべきかを判断します。完了条件は、デモで示されているスナップ動作を維持しながら、利用者が any キャストなしでその位置を取得できることです。

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

評価

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

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

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