こんにちは、いくつかの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
とコンパイルすると、エラーメッセージが表示されます。
そのようなデータや私が使用できる何かが何らかの形で公開されているかどうか知っていますか?
ドロップ後のドラッグされたアイテムの位置を取得するために使用している別の解決策は次のとおりです。
テンプレート
<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>