Как получить позицию после падения с помощью cdkDrag? - PullRequest
Новая
       36

Как получить позицию после падения с помощью cdkDrag?

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

Привет! Мне нужно иметь возможность перетаскивать некоторые элементы HTML, но мне нужно знать конечную позицию отбрасывания.

, используя директиву cdkDrag, которую я вижу из документов что есть событие cdkDragEnded.

Это мой шаблон: 

<div cdkDrop>
  <div cdkDrag (cdkDragEnded)="dragEnd($event)">
    ...other stuff
  </div>
</div>

Обратный вызов: 

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

В консоли я нашел то, что мне нужноно это частное свойство события event.source._dragRef._passiveTransform, и я получаю сообщение об ошибке при компиляции.

Знаете ли вы, как такие данные или что-то еще, что я могу использовать, как-то раскрыто?

Ответы [ 2 ]

0 голосов
/ 18 августа 2019

Другое решение, которое я использую, чтобы получить позицию перетаскиваемого элемента после выпадения :

Шаблон 

<div
  cdkDrag
  (cdkDragEnded)="dragEnded($event)"
>
</div>

Компонент 

  dragEnded($event: CdkDragEnd) {
    const { offsetLeft, offsetTop } = $event.source.element.nativeElement;
    const { x, y } = $event.distance;
    const positionX = offsetLeft + x;
    const positionY = offsetTop + y;
    console.log({ positionX, positionY });
  }
0 голосов
/ 31 января 2019

Решение, которое я нашел, состоит в том, чтобы получить значение style.transform, которое cdkDrag установлено 

import { Component, ViewChild, ElementRef } from "@angular/core";
import { CdkDragEnd } from "@angular/cdk/drag-drop";

@Component({
  selector: "item",
  styles: [
    `
      .viewport {
        position: relative;
        background: #ccc;
        display: block;
        margin: auto;
      }
      .item {
        position: absolute;
        background: #aaa;
      }
    `
  ],
  template: `
    <div class="viewport" cdkDrop>
      <div
        #item
        class="item"
        cdkDrag
        (cdkDragEnded)="dragEnd($event)"
        [style.top.px]="initialPosition.y"
        [style.left.px]="initialPosition.x"
      >
        anything
      </div>
    </div>
  `
})
export class CanvasItemComponent {
  constructor() {}

  @ViewChild("item")
  item: ElementRef;

  initialPosition = { x: 100, y: 100 };
  position = { ...this.initialPosition };
  offset = { x: 0, y: 0 };

  dragEnd(event: CdkDragEnd) {
    const transform = this.item.nativeElement.style.transform;
    let regex = /translate3d\(\s?(?<x>[-]?\d*)px,\s?(?<y>[-]?\d*)px,\s?(?<z>[-]?\d*)px\)/;
    var values = regex.exec(transform);
    console.log(transform);
    this.offset = { x: parseInt(values[1]), y: parseInt(values[2]) };

    this.position.x = this.initialPosition.x + this.offset.x;
    this.position.y = this.initialPosition.y + this.offset.y;

    console.log(this.position, this.initialPosition, this.offset);
  }
}

или: 

dragEnd(event: CdkDragEnd) {
    this.offset = { ...(<any>event.source._dragRef)._passiveTransform };

    this.position.x = this.initialPosition.x + this.offset.x;
    this.position.y = this.initialPosition.y + this.offset.y;

    console.log(this.position, this.initialPosition, this.offset);
  }

Есть ли лучший способ получить это преобразование xи значения y без использования приватных переменных?

Редактировать: Функция будет добавлена ​​в https://github.com/angular/material2/pull/14696

...