cdkDragでドロップした後の位置を取得する方法は？

Question

こんにちは、いくつかのhtml要素をドラッグアンドドロップできるようにする必要がありますが、ドロップの終了位置を知る必要があります。

docs からわかるcdkDragディレクティブを使用して、イベントcdkDragEndedがあることを確認します。

これは私のテンプレートです：

<div cdkDrop>
  <div cdkDrag (cdkDragEnded)="dragEnd($event)">
    ...other stuff
  </div>
</div>

コールバックは次のとおりです。

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

コンソールで必要なものが見つかりましたが、これはイベントのプライベートプロパティですevent.source._dragRef._passiveTransformとコンパイルすると、エラーメッセージが表示されます。

そのようなデータや私が使用できる何かが何らかの形で公開されているかどうか知っていますか？

Answer 1

ドロップ後のドラッグされたアイテムの位置を取得するために使用している別の解決策は次のとおりです。

テンプレート

<div
  cdkDrag
  (cdkDragEnded)="dragEnded($event)"
>
</div>

コンポーネント

  dragEnded($event: CdkDragEnd) {
    const { offsetLeft, offsetTop } = $event.source.element.nativeElement;
    const { x, y } = $event.distance;
    this.positionX = offsetLeft + x;
    this.positionY = offsetTop + y;
    this.showPopup = true;
    console.log({ positionX, positionY });
  }

設定位置

ドラッグが終了したときに何かを表示したい場合があります。

<div
  *ngIf="showPopup"
  [ngStyle]="{
    'left': positionX + 'px',
    'right': positionY + 'px'
  }"
>
  I'm in position!
</div>