How to get the position after drop with cdkDrag?

Michele mpp Marostica picture Michele mpp Marostica · Jan 30, 2019 · Viewed 9.4k times · Source

Hi I need to be able to drag and drop some html elements but I need to know the end position of the drop.

using the cdkDrag directive I see from the docs that there's an event cdkDragEnded.

This is my template:

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

The callback is:

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

In the console I found what I need but it is a private property of the event event.source._dragRef._passiveTransform and I get the error message when I compile.

Do you know if such data or something else that I can use is exposed somehow?

Answer

egorgrushin picture egorgrushin · Oct 7, 2019

Simply use source.getFreeDragPosition() in (getFreeDragPosition) event like this:

dragEnd($event: CdkDragEnd) {
    console.log($event.source.getFreeDragPosition());
}`