Angular マテリアル - 要素を新しい位置に移動します

Question

Angular マテリアルのドラッグ アンド ドロップについてサポートが必要です

アイデアは、画面上の黒いブロックを Y 軸に沿って移動できるということです。このために、Angular マテリアルのドラッグ アンド ドロップを使用します。このために、onDragMoved、onDragStart、onDragEnd の 3 つのメソッドがあります。マウスを放すと高さに 100 ピクセルが追加され、ブロックを 2 回目に動かし始めたいときは、前回停止した場所から動き始めるはずですが、これは起こりません。何らかの理由でけいれんが発生します

問題のビデオ - https://dropmefiles.com/0XFU6

onDragMoved(event: CdkDragMove) {
    console.log('движемся')
    コンソール.ログ(イベント)
    console.log('neeeew coord', this.qwwqwqw)


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

  onDragStart(イベント: CdkDragMove) {
    console.log('Кнопка мыги зажата');
    コンソール.ログ(イベント.距離)
  }

  onDragEnd(イベント: CdkDragMove) {
    console.log('Кнопка мыли отпущена');
    コンソール.ログ(イベント)

    const y = イベント.距離.y 100; // 100
    const 要素 =event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // CSS трансформации
    element.style.height = this.originalHeight 'px'; // 最高のパフォーマンスを実現します

    イベント.距離.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 メソッドに渡しましたが、2 回目のイベントでランダムな座標に更新されました

Answer 1

[cdkDragFreeDragPosition]属性を使用します

HTML:

リーリー

TS:

リーリー