cdk-drag: incorrect position when dragging child element

[skreborn]

Bug, feature request, or proposal:

When a cdk-drag is within a cdk-drop, the cdk-drag element will jump to an incorrectly offset position when the mouse is first moved, given that the user drags this element using a child. The offset is always the same as the child element's offset from the parent cdk-drag container (for example, padding of the parent or margin of the child).

What is the expected behavior?

The cdk-drag element should always stay at the same position relative to the cursor.

What is the current behavior?

The cdk-drag element jumps towards the bottom right when the child element is offset from its parent.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-92bnjh?file=app/cdk-drag-drop-sorting-example.html

Drag using "FIRST", "LAST" or the movie title to see the incorrect behavior. Dragging by the parent element results in the correct and desired behavior.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material: 7.0.0-beta.0

[skreborn]

It seems like this is due to the fact that _getPointerPositionInElement reports the incorrect offset by using event.offsetX and event.offsetY - both of which refer to the cursor's offset from the event originator (the child element) instead of the desired parent.

[skreborn]

Copying over the calculation from the touch event seems to result in the correct behavior.

const x = (this._isTouchEvent(event) ? event.targetTouches[0] : event).pageX - referenceRect.left - this._scrollPosition.left;
const y = (this._isTouchEvent(event) ? event.targetTouches[0] : event).pageY - referenceRect.top - this._scrollPosition.top;

Can anyone verify this?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}