Событие cdkDragMoved возвращает pointerPosition на основе clientX и clientY вместо контейнера

Question

Я пытаюсь получить координаты x и y для блока на основе позиции внутри контейнера. Вот пример из https://material.angular.io.

В настоящее время у меня есть это небольшое демо, чтобы проверить вывод события cdkDragMoved.

<div class="something">
  <div class="example-box" cdkDrag cdkDragBoundary=".something" (cdkDragMoved)="test($event)" (cdkDragEnded)="test($event)" (cdkDragReleased)="test($event)">
    Drag me around
  </div>
</div>

export class CdkDragDropOverviewExample {
  test(e) {
    console.log(e)
  }
}

Желаемый вывод - позиция относительно родительского элемента в пикселях или процентах.

Answer 1

Возможно, есть более элегантные способы, но вот как я это сделал.

1. Используя @ ViewChild , получите ElementRef для родительского элемента, а также элемент, являющийсятащили.Отсюда мы можем получить доступ к nativeElement, чтобы получить ссылку на элементы DOM
2. . Выяснить верхний левый угол перетаскиваемого элемента, вычтя верхний угол перетаскиваемого элемента (который может бытьобнаруживается путем вызова getBoundingClientRect() на элементе) из позиции указателя (из события onDragMoved)
3. Выясните также верхний левый угол родительского элемента, используя ту же технику
4. Используя два приведенных выше значения, вы можете определить, какое положение перетаскиваемого элемента относительно родительского элемента в пикселях, взяв pointer position - distance from corner of dragged element - position of the parent element relative to the page

. Вот пример в StackBlitz .