1

I'm writing an angular 14 app and it contains a div element that is draggable using cdkDrag and also has two buttons to scale up or down the div.

so in the component i save a scale version with default to one, and scale buttons add or dec 0.1 from the scale variable, i define the style of the div using ngStyle with [ngStyle]="{ transform: 'scale(' + scale + ')' }" and added a cdkDrag to support dragging this div around the screen.

since drag and drop uses transform and scaling using transform whenever I try to scale up or down and a few times and then move it around, then scale it again a few times and move it around.. it have a weird behavior of going back to the original position and going back to the original size while moving it around.

i saw some old bug reports from a few years ago but i couldn't find anything that could help in my situation.

so my template file is this:

<div cdkDrag [ngStyle]="{ transform: 'scale(' + scale + ')' }">
  <button mat-icon-button (click)="zoomIn()" color="primary">
    <mat-icon>zoom_in</mat-icon>
  </button>
  <button mat-icon-button (click)="zoomOut()" color="primary">
    <mat-icon>zoom_out</mat-icon>
  </button>
  <p>Start editing to see some magic happen :)</p>
</div>

and I also reproduced at Stackblitz link

any information regarding this issue would be greatly appreciated.

ufk
  • 30,912
  • 70
  • 235
  • 386
  • It looks like, both your code and cdk is trying to apply transform to the same element, which is causing this behaviour. It looks like cdk has an animation that scales the element you are dragging by 1.2 which is conflicting with yours. You could try to add an extra div and separate your styles from `cdkDrag` div. – Gowtham Raj J Jul 18 '22 at 22:31
  • ```drag-preview{ -webkit-transform:scale(1,1); transform:scale(1,1); }``` I think that's what you are looking for. – Sandeep More Jul 19 '22 at 02:25

1 Answers1

2

The way I solved the issue in my project is that I put the element that scales inside the element that drags.

<div cdkDrag >
    <div[ngStyle]="{ transform: 'scale(' + scale + ')' }">

Stackblitz example

kvetis
  • 6,682
  • 1
  • 28
  • 48