如何获取删除了另一个列表项的列表项答案

【问题标题】：How to get a list item on which another list item was dropped如何获取删除了另一个列表项的列表项
【发布时间】：2021-10-13 09:07:34
【问题描述】：

假设我有两个列表：一些产品列表和产品类别列表。我希望能够通过将产品放在相应的类别列表项上来将其移动到一个类别。这是一个简单的例子：

<mat-list id="product-list" cdkDropList cdkDropListConnectedTo="category-list">
  <mat-list-item *ngFor="let product of products" cdkDrag>
      <span>product.name</span>
  </mat-list-item>
</mat-list>

<mat-list id="category-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
  <mat-list-item *ngFor="let category of categories">
      <span>category.name</span>
  </mat-list-item>
</mat-list>

现在onDrop 处理程序被调用，但我不知道如何确定产品列表项被删除的类别列表项。由于类别列表项不可拖动，currentIndex 在事件中始终为零。

Angular/Angular Material 的版本是 12.1.3。

【问题讨论】：

标签： angular angular-material drag-and-drop

【解决方案1】：

最后我设法用elementFromPoint 函数解决了这个问题。这是更新的示例：

<mat-list id="product-list" cdkDropList>
  <mat-list-item *ngFor="let product of products" cdkDrag
                 (cdkDragEnded)="onDragEnded($event, product)">
    <span>product.name</span>
  </mat-list-item>
</mat-list>

<mat-list id="category-list">
  <mat-list-item *ngFor="let category of categories" class="drop-receiver"
                 (_drop)="onDrop($event, category)">
    <span>category.name</span>
  </mat-list-item>
</mat-list>

您可以看到列表不再连接。类别列表看起来像一个普通的列表，除了它的项目有类 drop-receiver 和自定义 _drop 事件的侦听器。

在产品列表中，我收听cdkDragEnded 事件。这是事件处理程序的代码：

onDragEnded(event: CdkDragEnd, product: Product) {
  const dropPointElement = document.elementFromPoint(event.dropPoint.x, event.dropPoint.y);
  if (dropPointElement) {
    const dropReceiver = dropPointElement.closest('.drop-receiver');
    if (dropReceiver) {
      const dropEvent = new CustomEvent('_drop', {detail: product});
      dropReceiver.dispatchEvent(dropEvent);
    }
  }
}

在上面的示例中，我使用放置点坐标查找 DOM 元素。然后，如果找到元素，我会寻找一个最接近的 DOM 元素，其类为 drop-receiver。最后，我将名为 _drop 的自定义事件发送到放置接收器元素。现在，在该事件的处理程序中，可以实现一些将类别分配给所选产品的逻辑。

【讨论】：