Угловой материал 7 Перетащите координаты x и y - PullRequest
Новая
       46

Угловой материал 7 Перетащите координаты x и y

0 голосов
/ 14 января 2019

У меня есть контейнер с элементом внутри. Я хочу иметь возможность перетаскивать элемент в другое место внутри контейнера и видеть новые координаты x и y (где x = 0 и y = 0 - верхний левый угол контейнера).

У меня установлен базовый стековый блик на https://stackblitz.com/edit/material-6-mjrhg1,, но он не отображает весь объект события в консоли («объект слишком большой»). В моем реальном приложении я могу просмотреть весь объект события, но не могу найти никаких свойств, описывающих новые местоположения 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, или мне следует использовать другое событие / подход?

1 Ответ

0 голосов
/ 15 января 2019

Вы можете получить доступ к перетаскиваемому элементу из свойства source вашего события CdkDragEnd. 

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

Я изменил стек, чтобы записывать координаты x и y перемещаемого прямоугольника здесь .

Чтобы решить проблему, когда прямоугольник, который нужно переместить, содержится в другом элементе, мы используем функцию getPosition (которая была взята из this stackoverflow post), чтобы получить верхние / левые значения содержащий элемент, который затем позволяет нам правильно рассчитать координаты x / y.

...