Angular CDK DragDrop：拖拽复制时阻止源列表项提前移除

要实现从列表A拖拽项到列表B进行复制，且源列表A的项全程不被移除，你需要通过以下步骤调整CDK拖拽的配置：

1. 启用拖拽副本模式 #

在列表A的cdkDrag元素上添加cdkDragCopy指令，这会让CDK在拖拽时创建一个副本而非移动原项，原项会始终保留在源列表中：

<!-- 列表A的拖拽项模板 -->
<div cdkDrag cdkDragCopy *ngFor="let item of listA">
  {{ item }}
</div>

2. 调整drop事件逻辑 #

在组件的drop事件处理函数中，仅对目标列表执行复制操作，无需修改源列表：

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

// ...

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    // 同一列表内拖拽，执行排序
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // 跨列表拖拽，执行复制（源列表数据不会被修改）
    copyArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

原理说明 #

默认情况下，Angular CDK的跨列表拖拽是移动模式，拖拽开始后会临时移除源列表的项以配合视觉反馈。而cdkDragCopy会强制CDK创建拖拽元素的副本，原项会一直保留在源列表中，直到放置完成后再执行复制逻辑，从根本上避免了源项提前消失的问题。

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