Search code examples
angulardrag-and-dropdraggable

How to get the position after drop with cdkDrag?

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?

Solution

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

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