Angular Material 7 拖放 x 和 y 坐标 [英] Angular Material 7 Drag and Drop x and y coordinates

问题描述

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

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

基本设置是这样的:

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

知道要检查什么属性才能找到 x 和 y 坐标吗?或者我应该使用不同的事件/方法吗?

解决方案

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

onDragEnded(event) {让元素 = event.source.getRootElement();让 boundingClientRect = element.getBoundingClientRect();让 parentPosition = this.getPosition(element);console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y:' + (boundingClientRect.y - parentPosition.top));}获取位置(el){让 x = 0;让 y = 0;while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {x += el.offsetLeft - el.scrollLeft;y += el.offsetTop - el.scrollTop;el = el.offsetParent;}返回{顶部:y，左:x}；}

我修改了 stackblitz 来记录被移动的矩形的 x 和 y 坐标 这里.

为了解决要移动的矩形包含在另一个元素中的问题，我们使用了 getPosition 函数(该函数取自 this stackoverflow post) 来检索包含元素的顶部/左侧值，然后让我们计算x/y 坐标正确.

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?

解决方案

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.

这篇关于Angular Material 7 拖放 x 和 y 坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！