0

I tried to bind the x and y position to the svg circle. It works fine with (cdkDragEnded) but it does not work with (cdkDragMoved). On onDragMoved i get really high values for x and y position when i only drag the circle a little bit.

HTML:

<svg height="1000" width="1000">
<circle r="50" stroke="black" stroke-width="3"
cdkDrag
[cdkDragFreeDragPosition]="{x: x + 50, y: y + 50}"
(cdkDragMoved)="onDragMoved($event)"
(cdkDragEnded)="onDragEnded($event)"/>

TypeScript:

interface Position {
 x?: number;
 y?: number;
}

@Component({
selector: 'app-drag3',
templateUrl: './drag3.component.html',
styleUrls: ['./drag3.component.css']
})

export class Drag3Component {
p: Position = {};
x: number = 100;
y: number = 100;

onDragMoved(event: any){
 this.p = event.source.getRootElement().getBoundingClientRect();
 this.x = this.p.x!;
 this.y = this.p.y!;
 console.log({ x: this.x , y: this.y});
}

onDragEnded(event: any){
 this.p = event.source.getRootElement().getBoundingClientRect();
 this.x = this.p.x!;
 this.y = this.p.y!;
 console.log({ x: this.x , y: this.y});
}
}

Does anyone have an idea how to fix this?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Robin
  • 1
  • I checked your code by running inside stackblitz, it [works fine](https://stackblitz.com/edit/angular-ahlywn-dlsnny). Can you please explain further? And mentioned what is not working – Pankaj Parkar Aug 13 '22 at 07:01
  • @Pankaj Parkar Thank you really much for your replay and trying to help. I find it difficult to explain with words so i made a short video: https://youtu.be/GJYszgOrwJI – Robin Aug 13 '22 at 08:19
  • I found a workaround: I dont bind the first html circle position and instead set his position as a static number. After that i create another circle which has the position binded but has no cdkDrag. I would still really appreciate if someone could explain the behaviour in the video and if someone knows a solution to it. – Robin Aug 13 '22 at 08:57
  • ` ` – Robin Aug 13 '22 at 08:59

0 Answers0