angular / angular/components

bug(cdkDrag): "pointerPosition" property of the "CdkDragMove" event is not correct with "cdkDragBoundary"

Aperta
#29,867 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop needs: discussion
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

**Context**
According to the official documentation, the property "pointerPosition" of the "CdkDragMove" event is : "Position of the user's pointer on the page."
See : https://material.angular.io/cdk/drag-drop/api#CdkDragMove

**Problem**
If I use the "cdkDragBoundary" property, the property "pointerPosition" returns cursor position only between boundaries.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-knrvcz?file=src%2Fmain.ts
Steps to reproduce:
1. Move the red block until the cursor moves out of the blue block
2. At the bottom of the blue box, you will see that the cursor position is stuck to the boundaries of the blue box.

### Expected Behavior

I expect to have the current position of the cursor on screen, wherever it is located.

### Actual Behavior

The position displayed of the cursor is limited to the limits of the blue block

### Environment

- Angular: 18.2.8
- CDK/Material: 18.2.8
- Browser(s): Chrome 129.0.6668.100
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione collegata di StackBlitz in src/main.ts e confronta il comportamento documentato di pointerPosition di CdkDragMove con il risultato quando cdkDragBoundary è presente. Traccia la gestione del trascinamento di CDK che produce l'evento, quindi verifica che pointerPosition rimanga la posizione sullo schermo del cursore al di fuori del limite, mentre l'elemento trascinato rimane vincolato.

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

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
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.