Angular Material - 移動元素到新位置

Question

我需要有關 Angular 材質拖放的幫助

這個想法是我可以沿著 Y 軸移動螢幕上的黑色區塊，為此我使用 Angular Material 拖放，為此我有 3 個方法 onDragMoved、onDragStart、onDragEnd。當我釋放滑鼠時，我將在高度上添加100px，當我想第二次開始移動該塊時，它應該從上次停止的位置開始移動，但這種情況不會發生，某種原因發生抽搐

有問題的影片 - 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; // получаем координату Y курсора мыши при отпускании элеоентале обн
    const element = event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // устанавливаем новую позицию элемента соооощзицию элемента
    element.style.height = this.originalHeight 'px'; // восстанавливаем исходную высоту блока

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

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

[在此輸入影像說明](https://i.stack.imgur.com/RmWP2.png)

我嘗試調試，我將新坐標傳遞給 onDragMoved 方法，但在第二個事件中它們被更新為一些隨機坐標

Answer 1

使用[cdkDragFreeDragPosition]屬性

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 }
}