Сбросить преобразование смещения в Angular Материал Drag and Drop - PullRequest
Новая
       43

Сбросить преобразование смещения в Angular Материал Drag and Drop

0 голосов
/ 11 апреля 2020

У меня есть <div> элемент с position: absolute внутри контейнера с position: relative. Его свойства left и top связаны с данными X и Y в component.ts. Моя цель - переместить div внутри моего контейнера с помощью cdk drag and drop.

В случае события dragEnded я получаю данные, которые мне нужны, чтобы обновить координаты X и Y, и поэтому начинается проблема ... 

<div
    class="character"
    [style.left.px]="x"
    [style.top.px]="y"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
  ></div>

Я заметил, что cdk drag and drop применяется свойство transform: translate3d(x,y,z), чтобы переместить мой div, начиная с его исходного положения. Поэтому, если я хочу, чтобы мои div и top были привязаны к моим свойствам бэкэнда, я могу просто вычислить новые координаты для события dragEnd, применить их и сбросить свойство transform, созданное cdk. Все работает.

Но в следующий раз, когда я перетаскиваю элемент, материал применяет преобразование не начиная с новой абсолютной позиции моего div, а с исходной.

Я думал, что одно решение может быть проверить, содержит ли CdkDragEnd event данные, относящиеся к начальной точке преобразования, и сбросить их, но я ничего не нашел.

Есть идеи, если это свойство скрыто где-то в CdkDragEvent? Или есть какое-то другое решение этой проблемы?

Спасибо, ребята

1 Ответ

0 голосов
/ 30 апреля 2020

Я тоже столкнулся с этой проблемой некоторое время назад. После долгих поисков в inte rnet способа сброса свойства transform я ничего не получил.

Кажется, вы не можете сбросить свойство transform. Что бы вы ни делали, окончательная позиция drag-div будет рассчитываться путем суммирования последних свойств top, left и transform.

Мое решение не состояло в том, чтобы изменить left и top свойства элемента динамически и отслеживают значения x и y с помощью источника событий (cdkDragEnded)

То, что я сделал, было

  1. Создайте два поля xInitial = x и yInitial = y для хранения начальных координат div для перетаскивания

  2. Первоначально визуализируйте div с этими начальными координатами; 

    <div
    class="character"
    [style.left.px]="xInitial"
    [style.top.px]="yInitial"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
></div>

  3. Измените dragEnded($event, c), чтобы отслеживать фактическое положение перетаскиваемого элемента div 

    dragEnded(event, c) {
     let element = event.source.getRootElement();
     let newPos = element.getBoundingClientRect();

     this.x = newPos.x;
     this.y = newPos.y;
}
  4. Наконец сохраните значения this.x и this.y для инициализации компонента в следующий раз.
...