Angular Material 7 Drag and Drop x and y coordinates

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?

Fabian Küng · Accepted Answer · 2019-01-16T07:29:31.853

14

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.

edited Jan 16 '19 at 07:29

answered Jan 15 '19 at 06:07

Fabian Küng

5,925
28
40

2

This is really close, I think. The problem is that x and y are relative to the window, not the bounding container (even though the name suggests otherwise). See https://stackblitz.com/edit/material-6-fccbia to show that when the box is moved to the top left it is not at 0, 0. Where did you find documentation for `getBoundingClientRect()`? – Tim Jan 15 '19 at 21:47
It's from the MDN documentation on Element: https://developer.mozilla.org/en-US/docs/Web/API/Element – Fabian Küng Jan 15 '19 at 21:49
2

Okay I think I found a solution for your problem, check this stackblitz: https://stackblitz.com/edit/material-6-xyszfl?file=app/app.component.ts, it is based on this stackoverflow answer: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element/39149560#39149560 – Fabian Küng Jan 16 '19 at 06:06
1

Is it possible set the position? – Matheus Bernardi Oct 08 '19 at 16:18

Angular Material 7 Drag and Drop x and y coordinates

1 Answers1

Linked