angular / angular/components

[Cdk drag-drop] Expose dragRef._pickupPositionInElement

Open
#17,353 7 comments 7 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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.

Contributor guide

Open the contributing guide

Research direction

Start by opening the linked StackBlitz and reading the CDK drag-and-drop DragRef API, especially the _pickupPositionInElement use with cdkDragConstrainPosition. Trace how the cdkDrag directive exposes DragRef and decide where the pickup position should be publicly accessed. Done means consumers can obtain that position without an any cast while preserving the demonstrated snapping behavior.

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.