获取 cdkDropList 中项目的放置位置

Posted 2023-05-08

【中文标题】获取 cdkDropList 中项目的放置位置

【英文标题】：Get drop position of item in cdkDropList

【发布时间】：2019-11-13 03:41:33

【问题描述】：

我正在尝试获取（或计算）在角度材料 cdkDropList 中放置的项目的 x/y 坐标。我研究了文档https://material.angular.io/cdk/drag-drop/api#CdkDragDrop，发现在CdkDragDrop界面中应该有一个名为“距离”的属性，但我在事件的控制台日志中找不到它：

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

我只找到了容器、currentIndex、item、previousContainer、previousIndex。 顺便说一句：我是 Angular 新手，这和文档让我感到困惑:(

谢谢和问候

【参考方案1】：

好吧，算了……属性距离是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`;