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 курсора мыши при отпускании элемента и добавляем 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>

[在此处输入图像描述](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 }
}