Angular CDK drag-drop with zoom by CSS-property “transform: scale(0.5)” doesn’t work as expected

Question

Angular CDK drag-drop with zoom by CSS-property “transform: scale(0.5)” doesn’t work as expected.

If the outer-DIV is scaled by CSS-property “transform: scale(0.5)” the drag doesn’t align properly with the mouse pointer. This happens as soon as the scale is unequal to 1.

Here an example: https://stackblitz.com/edit/angular-2q1mte

I’m aware of this post Drag and drop with pinch zoom doesn't work as expected and therefore the

“@Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point”.

But how to write the custom logic to map the drag properly with the pointer? Or is there any other solution to provide the zoom functionality but keep the drag aligned properly with the mouse pointer?

Any help appreciated

Answer 1

i got the problem too.

Here the solution : initialize a scale variable and use it the dragConstrainPoint

  // change position of object while zooming ! (cdk fix)
    dragConstrainPoint = (point, dragRef) => {
      let zoomMoveXDifference = 0; 
      let zoomMoveYDifference = 0; 
      if (this._scale !- 1) {
       zoomMoveXDifference = (1 - this._scale) * dragRef.getFreeDragPosition().x;
       zoomMoveYDifference = (1 - this._scale) * dragRef.getFreeDragPosition().y;
      }
      return {
        x: point.x + zoomMoveXDifference ,
        y: point.y + zoomMoveYDifference
      };