feat(drag-and-drop): Allow more flexibility for position of *DragPreview directive relative to mouse position
- 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
When I use the drag preview directive `*cdkDragPreview` for my horizontal list, the dragged item position is wrong
Possibly related #16171
### Reproduction
[StackBlitz link](https://stackblitz.com/edit/components-issue-1y4nnz?file=src%2Fapp%2Fexample-component.html,src%2Fapp%2Fexample-component.ts,src%2Fapp%2Fexample-component.css)
### Expected Behavior
`*cdkDragPreview` dragging position should be the same as the dragging position is without using `cdkDragPreview`
### Actual Behavior
The dragging position always started from the pointer edge, giving a undesired behavior
### Environment
- Angular: v16
- CDK/Material: v16
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): All
Contributor guide
Research direction
Start with the linked StackBlitz files src/app/example-component.html, src/app/example-component.ts, and src/app/example-component.css to reproduce the horizontal-list behavior with *cdkDragPreview. Then trace the Angular CDK drag-preview entry point and compare the pointer offset with dragging without the preview. Done means the preview preserves the expected item position relative to the pointer.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100