Angular Material 7 拖放 x 和 y 坐标

Question

我有一个容器，里面有一个元素。我希望能够将元素拖到容器内的另一个位置并查看新的 x 和 y 坐标（其中 x=0 和 y=0 是容器的左上角）。

我在 https://stackblitz.com/edit/material-6-mjrhg1 设置了一个基本的 stackblitz，但它不会在控制台中显示整个事件对象 ("object too large")。在我的实际应用程序中，我可以查看整个事件对象，但我找不到任何描述新的 x 和 y 位置的属性。

基本设置是这样的：

<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>

我也尝试了其他一些事件，但 cdkDragEnded 对我来说最有意义。

有什么想法属性要检查 x 和 y 坐标，还是我应该使用不同的事件/方法？

Answer 1

您可以在 CdkDragEnd 事件中访问从 source 属性拖动的元素。

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 };
}

我修改了 stackblitz 以记录正在移动的矩形的 x 和 y 坐标 here。

为了解决要移动的矩形包含在另一个元素中的问题，我们使用getPosition函数（已从this Whosebug post中获取）来检索包含元素的 top/left 值，然后我们可以正确计算 x/y 坐标。

Angular Material 7 拖放 x 和 y 坐标

Angular Material 7 Drag and Drop x and y coordinates

drag-and-drop

angular-material

angular-material-7