Angular CDK拖拽问题：动态生成容器无法接收拖拽元素求解决方案

问题场景 #

实现基于Angular CDK的可拖拽列表，需将列表元素拖拽到点击添加按钮动态生成的div容器中，但仅能拖拽到第一个div容器，后续生成的容器无法接收拖拽元素。

核心问题分析 #

1. 动态容器无唯一标识：动态生成的cdkDropList缺少唯一的模板引用变量或id，导致连接配置无法匹配新容器
2. 连接列表逻辑错误：原getConnectedLists方法中错误地给源列表添加了索引后缀，且未正确维护动态容器的连接关系

解决方案 #

1. 给所有拖拽容器添加唯一标识 #

修改HTML代码，为源列表和动态生成的容器添加唯一id及模板引用变量：

<div class="drag-column">
    <div class="field-list text-center">
        <p>Drag and Drop the column</p>
        <!-- 源拖拽列表：添加固定id -->
        <div cdkDropList #newTodoList="cdkDropList" [id]="'newTodoList'"
             [cdkDropListData]="section.newTodo"
             [cdkDropListConnectedTo]="getConnectedLists()" 
             class="example-list" (cdkDropListDropped)="newDrop($event, -1)">
            <div class="example-box" *ngFor="let item of section.newTodo" cdkDrag [cdkDragData]="item">
                {{ item }}
            </div>
        </div>
    </div>

    <!-- 动态生成的容器：添加带索引的id和模板引用变量 -->
    <div class="input-column" *ngFor="let input of inputColumns; let i = index">
        <b>A{{ i + 1 }}</b>
        <div cdkDropList #newInputList="cdkDropList" [id]="'newInputList' + i"
             [cdkDropListData]="input.columnData"
             [cdkDropListConnectedTo]="getConnectedLists()" 
             class="example-list" (cdkDropListDropped)="newDrop($event, i)">
            <div class="example-box" *ngFor="let item of input.columnData" cdkDrag [cdkDragData]="item">
                {{ item }}
            </div>
        </div>
    </div>

    <button class="add-column" (click)="addInputColumn()">add</button>
</div>

2. 修正连接列表生成逻辑 #

修改TypeScript中的getConnectedLists方法，确保返回所有拖拽容器的唯一标识：

getConnectedLists() {
    // 连接源列表与所有动态生成的输入容器
    return ['newTodoList', ...this.inputColumns.map((_, i) => `newInputList${i}`)];
}

3. 完善拖拽触发逻辑 #

优化newDrop方法，直接通过事件对象获取源和目标列表，无需依赖索引判断：

newDrop(event: CdkDragDrop<string[]>, divIndex: number) {
    const draggedItem = event.item.data as string;
    const sourceList = event.previousContainer.data as string[];
    const targetList = event.container.data as string[];

    // 从源列表移除拖拽元素
    const sourceIndex = sourceList.indexOf(draggedItem);
    if (sourceIndex !== -1) {
        sourceList.splice(sourceIndex, 1);
    }

    // 目标列表处理：已有元素则交换，否则添加
    if (targetList.length > 0) {
        const targetItem = targetList[0];
        targetList.splice(0, 1, draggedItem);
        sourceList.push(targetItem);
    } else {
        targetList.push(draggedItem);
    }
}

关键注意点 #

• 每个cdkDropList必须拥有唯一的id，Angular CDK通过该标识建立拖拽连接关系
• 动态添加容器后，getConnectedLists会自动返回更新后的连接列表，确保新容器能被识别
• 拖拽事件处理直接使用事件对象中的previousContainer和container获取源/目标数据，避免依赖索引导致的错误

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