获取项目在 cdkDropList 中的放置位置

Get drop position of item in cdkDropList

我正在尝试获取(或计算)x/y angular-material cdkDropList 中掉落项目的坐标。我研究了文档 https://material.angular.io/cdk/drag-drop/api#CdkDragDrop 发现 CdkDragDrop 界面中应该有一个名为 "distance" 的 属性 但我在事件的控制台日志中找不到它:

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

我只找到了 container、currentIndex、item、previousContainer、previousIndex。 顺便说一下:我是 angular 的新手,这个和文档让我很困惑 :(

谢谢和问候

好吧,算了...属性 距离是在 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}`;
  }
}