Angular CDK拖拽问题：添加cdkDropList后棋子复位，需保留组件

问题 #

使用Angular CDK的cdkDragDrop实现跳棋棋子拖拽时，移除cdkDropList指令后，棋子可正常移动并停留在目标位置；但添加cdkDropList后，棋子移动后会自动返回原位置。需保留cdkDropList以获取event.container.data和event.previousContainer.data。

原因分析 #

当前每个棋盘格子作为独立cdkDropList，绑定的数据源是单个item对象而非数组。Angular CDK拖拽系统默认基于数组数据的转移/移动逻辑更新视图，若未手动修改数据模型，CDK会因数据无变更而重置拖拽元素位置。

修复方案 #

1. 调整HTML结构（保留cdkDropList） #

利用cdkDropListGroup自动组内连接所有拖拽容器，确保棋子可在任意格子间拖拽：

<div class="checkerboard-wrapper" cdkDropListGroup>
    <div *ngFor="let item of items;let i=index">
        <div 
            id="{{item.squareId}}" 
            class="{{item.class}}" 
            cdkDropList 
            [cdkDropListData]="item"
            (cdkDropListDropped)="drop($event)"
        >
            <div *ngIf="newGame" class="images">
                <img 
                    loading="lazy" 
                    *ngIf="item.img" 
                    id="{{i}}" 
                    class="checkerImg" 
                    src="{{item.img}}" 
                    cdkDrag
                />
                <div *cdkDragPlaceholder class="drag-placeholder"></div>
            </div>
        </div>
    </div>
</div>

• cdkDropListGroup会自动将组内所有cdkDropList设为可互相拖拽的目标，无需手动配置cdkDropListConnectedTo。
• 添加*cdkDragPlaceholder可在拖拽时显示占位符，提升交互体验。

2. 修改drop方法，手动更新数据模型 #

在drop事件中，手动交换原位置和目标位置的棋子数据，触发Angular变更检测更新视图：

drop(event: CdkDragDrop<any>) {
    const fromSquare = event.previousContainer.data;
    const toSquare = event.container.data;

    // 跳棋规则：目标位置已有棋子则不允许移动
    if (toSquare.img) return;

    // 转移棋子数据：清空原位置图片，设置目标位置图片
    toSquare.img = fromSquare.img;
    fromSquare.img = '';
}

• 直接修改items数组中对应对象的img属性，Angular会自动同步视图，使棋子停留在目标位置。
• 移除原方法中多余的id参数，与HTML中的调用保持一致。

3. 可选：添加占位符样式（优化交互） #

在组件CSS中添加占位符样式，让拖拽过程更直观：

.drag-placeholder {
    width: 100%;
    height: 100%;
    border: 2px dashed #888;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
}

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