Angular Material 7 Drag and Drop x and y coordinat

Question

I have a container with an element inside it. I want to be able to drag the element to another location inside the container and see the new x and y coordinates (where x=0 and y=0 is the top left corner of the container).

I have a basic stackblitz set up at https://stackblitz.com/edit/material-6-mjrhg1, but it won't show the entire event object in the console ("object too large"). In my actual application, I can look through the entire event object, but I can't find any properties describing the new x and y locations.

The basic setup is this:

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

I have also tried some of the other events, but cdkDragEnded makes the most sense to me.

Any ideas what property to check to find the x and y coordinates, or should I be using a different event / approach?

Answer 1

You can access the element that is being dragged from the source property on your CdkDragEnd event.

onDragEnded(event) {
  let element = event.source.getRootElement();
  let boundingClientRect = element.getBoundingClientRect();
  let parentPosition = this.getPosition(element);
  console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));        
}

getPosition(el) {
  let x = 0;
  let y = 0;
  while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: y, left: x };
}

I have modified the stackblitz to log the x and y coordinates of the rectangle being moved here.

To solve the problem where the rectangle to be moved is contained in another element, we use the getPosition function (which has been taken from this stackoverflow post) to retrieve the top/left values of the containing element, which then lets us calculate the x/y coordinates correctly.