Angular Material CDK拖拽：拖拽文件夹组件到另一组件触发函数可行吗？

完全可以实现，Angular CDK的拖拽功能支持自定义交互场景，不止局限于列表元素移动，以下是具体实现方案：

• 给文件夹组件同时配置拖拽源与放置容器
  每个folder-component需要同时作为可拖拽元素（cdkDrag）和可放置目标（cdkDropList），这样才能接收同类型组件的拖拽：

  <div
    cdkDropList
    (cdkDropListDropped)="onFolderDrop($event)"
    cdkDrag
    class="folder-component"
  >
    <!-- 文件夹组件内部内容 -->
  </div>
  

• 建立组件间的拖拽连接
  要让所有文件夹组件能互相识别拖拽目标，需要将它们的cdkDropList实例关联起来。可以通过父组件或全局服务收集实例，以下是组件内查询的实现方式：

  import { CdkDropList, CdkDragDrop } from '@angular/cdk/drag-drop';
  import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
  
  export class FolderComponent implements AfterViewInit {
    @ViewChildren(CdkDropList) private _dropLists!: QueryList<CdkDropList>;
  
    ngAfterViewInit(): void {
      // 将所有文件夹组件的放置容器互相连接
      this._dropLists.forEach(list => {
        list.connectedTo = this._dropLists.filter(l => l !== list);
      });
    }
  
    onFolderDrop(event: CdkDragDrop<any>): void {
      // 排除拖拽到自身的情况
      if (event.item === event.container) return;
  
      // 验证拖拽源和目标是否为同类型组件
      const dragElement = event.item.element.nativeElement;
      const dropElement = event.container.element.nativeElement;
      if (dragElement.classList.contains('folder-component') && dropElement.classList.contains('folder-component')) {
        // 执行你需要触发的指定函数
        this.triggerSpecifiedFunction();
      }
    }
  
    triggerSpecifiedFunction(): void {
      // 这里编写你的业务逻辑，比如文件夹合并、移动操作等
    }
  }
  

• 优化视觉反馈（可选）
  可以通过cdkDragPreview自定义拖拽时的预览样式，提升用户体验：

  <div cdkDrag>
    <ng-template cdkDragPreview>
      <div class="custom-drag-preview">正在拖拽的文件夹</div>
    </ng-template>
    <!-- 组件原有内容 -->
  </div>
  

最后确保在你的Angular模块中导入DragDropModule：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [DragDropModule],
  declarations: [FolderComponent]
})
export class YourModule { }

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