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

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

1 голос
/ 29 апреля 2019

Я пытаюсь получить координаты 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)
  }
}

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

1 Ответ

0 голосов
/ 22 мая 2019

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

  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 .

...