angular / angular/components

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

Open
#29,867 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/drag-drop needs: discussion
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction in src/main.ts and compare the documented CdkDragMove pointerPosition behavior with the result when cdkDragBoundary is present. Trace the CDK drag handling that produces the event, then verify that pointerPosition remains the cursor's screen position outside the boundary while the dragged element stays constrained.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.