Angular Material - Move element to new location

Question

I need help with Angular material drag and drop

The idea is that I can move the black block on the screen along the Y axis, for this I am using Angular Material drag and drop, for this I have 3 methods onDragMoved, onDragStart, onDragEnd. When I release the mouse I will add 100px to the height and when I want to start moving the block for the second time it should start moving from where it stopped last time but this doesn't happen, twitching occurs for some reason

The video in question - https://dropmefiles.com/0XFU6

onDragMoved(event: CdkDragMove) {
    console.log('движемся')
    console.log(event)
    console.log('neeeew coord', this.qwwqwqw)


    // if(this.qwwqwqw != null && event != null) {
      // event.distance.y = this.qwwqwqw
      // event.pointerPosition.y = this.qwwqwqw
      // this.qwwqwqw = null;
    // }
    
  }

  onDragStart(event: CdkDragMove) {
    console.log('Кнопка мыши зажата');
    console.log(event.distance)
  }

  onDragEnd(event: CdkDragMove) {
    console.log('Кнопка мыши отпущена');
    console.log(event)

    const y = event.distance.y 100; // 100
    const element = event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // CSS-трансформации
    element.style.height = this.originalHeight 'px'; // восстанавливаем исходную высоту блока

    event.distance.y = y;
    this.qwwqwqw = y;
  }

<div class="example-box" cdkDragLockAxis="y" cdkDrag (cdkDragMoved)="onDragMoved($event)" (cdkDragStarted )="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)">
  Координаты: {{ posX }}, {{ posY }}
</div>

[Enter image description here](https://i.stack.imgur.com/RmWP2.png)

I tried debugging, I passed the new coordinates to the onDragMoved method, but in the second event they were updated to some random coordinates

Answer 1

Use the [cdkDragFreeDragPosition] attribute

HTML:

<div class="example-box" cdkDragLockAxis="y" cdkDrag [cdkDragFreeDragPosition]="dragPosition" (cdkDragEnded)="onDragEnd($event)">
    Координаты: {{ posX }}, {{ posY }}
</div>

TS:

dragPosition = { x: 0, y: 0 };

onDragEnd(event: CdkDragMove) {
    this.dragPosition = { x: event.distance.x, y: event.distance.y + 100 }
}