angular / angular/components

feat(drag-and-drop): Allow more flexibility for position of *DragPreview directive relative to mouse position

Open
#27,749 3 comments 0 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.