Получить позицию сброса элемента в cdkDropList - PullRequest
Новая
       41

Получить позицию сброса элемента в cdkDropList

0 голосов
/ 02 июля 2019

Я пытаюсь получить (или рассчитать) координаты x / y отброшенного предмета в cdkDropList углового материала.Я изучил документацию https://material.angular.io/cdk/drag-drop/api#CdkDragDrop и обнаружил, что в интерфейсе CdkDragDrop должно быть свойство «расстояние», но я не могу найти его в журнале консоли события: 

drop(event: CdkDragDrop<string[]>) {
    console.log(event);
}

Я нашел только контейнер, currentIndex, item, previousContainer, previousIndex.Кстати: я новичок в angular, и это, и документация меня смущает: (

спасибо и привет

1 Ответ

1 голос
/ 02 июля 2019

Хорошо, забудь об этом ... Расстояние до свойства было введено в версии 8.0.1, а я на 7.1.0 ...

Обновление

Чтобы получить позицию в этой версии, вы можете использовать событие cdkDragMoved, как показано здесь:

https://grokonez.com/frontend/angular/angular-7/angular-7-drag-and-drop-example-angular-material-cdk

HTML часть: 

<div cdkDrag class="drag-box"
  (cdkDragStarted)="dragStarted($event)"
  (cdkDragEnded)="dragEnded($event)"
  (cdkDragMoved)="dragMoved($event)"
>
  drag me
</div>
<p>{{state}} {{position}}</p>

и в TypeScript: 

import { CdkDragEnd, CdkDragStart, CdkDragMove } from '@angular/cdk/drag-drop';
...
export class DragComponent implements OnInit {
  state = '';
  position = '';
  ...

  dragStarted(event: CdkDragStart) {
    this.state = 'dragStarted';
  }

  dragEnded(event: CdkDragEnd) {
    this.state = 'dragEnded';
  }

  dragMoved(event: CdkDragMove) {
    this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }
}
...