如何不使用循环实现Angular CDK Drag and Drop拖拽功能

问题根源 #

你的代码缺少两个关键配置导致拖拽失效：

• 每个cdkDropList未声明可连接的目标列表，CDK无法识别拖拽元素的可放置容器
• 组件类中未实现拖拽完成后的核心处理逻辑

修复步骤 #

1. 修改HTML模板，添加连接配置与模板引用 #

给每个cdkDropList添加模板引用变量，通过[cdkDropListConnectedTo]指定可连接的其他容器：

<div #dropListContainer class="example-container" cdkDropListGroup>
  <!-- 第一个拖拽容器，模板引用为list0 -->
  <div
    #list0
    cdkDropList
    [cdkDropListData]="list0Items"
    [cdkDropListConnectedTo]="[list1]"
  >
    <div
      cdkDrag
      [cdkDragData]="0"
      (cdkDragDropped)="dragDropped($event)"
      class="example-box"
    >
      <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
        <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
        <path d="M0 0h24v24H0z" fill="none"></path>
      </svg>
       0
    </div>
  </div>

  <!-- 第二个拖拽容器，模板引用为list1 -->
  <div
    #list1
    cdkDropList
    [cdkDropListData]="list1Items"
    [cdkDropListConnectedTo]="[list0]"
  >
    <div
      cdkDrag
      [cdkDragData]="1"
      (cdkDragDropped)="dragDropped($event)"
      class="example-box"
    >
      <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
        <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
        <path d="M0 0h24v24H0z" fill="none"></path>
      </svg>
       1
    </div>
  </div>
</div>

后续新增容器时，只需在cdkDropListConnectedTo数组中加入对应模板引用即可。

2. 组件类实现拖拽核心逻辑 #

确保组件导入CDK相关模块，并实现dragDropped方法处理元素转移：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 维护每个容器的元素数据，用于拖拽后同步状态
  list0Items = [0];
  list1Items = [1];

  dragDropped(event: CdkDragDrop<any[]>) {
    if (event.previousContainer !== event.container) {
      // 跨容器拖拽，转移元素数据
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
}

3. 模块中导入DragDropModule #

在组件所属的模块文件中导入CDK拖拽模块：

import { NgModule } from '@angular/core';
import { DragDropModule } from '@angular/cdk/drag-drop';
// 其他必要导入...

@NgModule({
  imports: [
    // 其他模块...
    DragDropModule
  ],
  declarations: [YourComponent]
})
export class YourModule { }

关键说明 #

• cdkDropListConnectedTo：是CDK识别可放置目标的核心配置，必须明确指定
• 模板引用变量：为每个拖拽容器提供唯一标识，用于跨容器连接配置
• dragDropped事件：负责处理拖拽完成后的元素数据同步，是拖拽功能生效的必要逻辑

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