angular / angular/components

[Cdk drag-drop] Expose dragRef._pickupPositionInElement

Aperta
#17,353 7 commenti 7 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop feature P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia aprendo lo StackBlitz collegato e leggendo l'API DragRef di CDK Drag-and-drop, in particolare l'uso di _pickupPositionInElement con cdkDragConstrainPosition. Segui come la direttiva cdkDrag espone DragRef e decidi dove la posizione di presa dovrebbe essere accessibile pubblicamente. Il lavoro è completo quando i consumer possono ottenere quella posizione senza un any cast, preservando al contempo il comportamento di aggancio dimostrato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.