Angular Material 12拖拽时如何识别目标容器？

在Angular Material的拖拽功能中，要识别源容器和目标容器是否为同一容器，可通过cdkDropListDropped事件对象的内置属性直接判断，具体实现如下：

核心判断逻辑 #

在组件类的drop方法中，利用事件对象的previousContainer（拖拽元素的起始容器实例）和container（元素放置的目标容器实例）进行对比：

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

// ...

drop(event: CdkDragDrop<any[]>) {
  // 直接对比容器实例，判断是否为同一容器
  const isSameContainer = event.previousContainer === event.container;

  if (isSameContainer) {
    // 同一容器内拖拽：执行排序逻辑
    moveItemInArray(event.previousContainer.data, event.previousIndex, event.currentIndex);
  } else {
    // 跨容器拖拽：执行元素转移逻辑
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

其他判断方式（可选） #

除了对比容器实例，也可以通过容器绑定的数据源或自定义标识来判断：

1. 通过绑定的数据源判断 #

利用cdkDropListData绑定的数组进行对比（前提是两个容器的数据源为不同数组）：

const isSameContainer = event.previousContainer.data === event.container.data;

2. 通过容器ID判断 #

先在模板中给容器添加唯一ID：

<!-- 第一个容器 -->
<div class="toc_listing" cdkDropList [cdkDropListData]="table_list" [cdkDropListConnectedTo]="table_toc"
     #list_toc="cdkDropList" id="toc-listing-container" (cdkDropListDropped)="drop($event)">
  <!-- 内容省略 -->
</div>

<!-- 第二个容器 -->
<tbody cdkDropList [cdkDropListData]="toc_list" 
     #table_toc="cdkDropList" id="table-toc-container" (cdkDropListDropped)="drop($event)">
  <!-- 内容省略 -->
</tbody>

然后在drop方法中通过DOM元素ID对比：

const isSameContainer = event.previousContainer.element.nativeElement.id === event.container.element.nativeElement.id;

内容的提问来源于stack exchange，提问作者Santhosh