Drag Drop CDK：拖拽时保持起始列表内被拖拽元素可见

嘿，我刚好碰到过一模一样的问题！这其实是CDK Drag&Drop的默认行为——它默认会把原元素从DOM中临时移除（设为display: none），直到拖拽结束才会放回。要实现拖拽时原列表布局完全不变，核心就是让组件拖拽元素副本而非原元素本身，下面是具体的实现步骤：

1. 启用拖拽克隆功能 #

首先要给cdkDrag指令绑定克隆模板，告诉CDK拖拽时要复制哪个元素结构：

• 先定义克隆元素的模板（和原列表项结构保持一致）：

<ng-template #dragClone let-item>
  <div class="list-item">{{ item.label }}</div>
</ng-template>

• 然后在原列表项上绑定这个模板：

<div class="list-item" 
     cdkDrag 
     [cdkDragClone]="dragClone" 
     [cdkDragData]="item">
  {{ item.label }}
</div>

2. 阻止原元素被隐藏 #

默认情况下，拖拽开始时CDK会把原元素的透明度设为0，我们需要强制让它保持可见：

• 最简单的方式是用CSS覆盖：

/* 确保克隆的预览元素样式和原元素一致 */
.cdk-drag-preview {
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 强制原元素始终可见 */
.cdk-drag {
  opacity: 1 !important;
}

• 也可以通过拖拽事件手动控制：

onDragStart(event: CdkDragStart) {
  // 拖拽开始时强制原元素保持可见
  event.source.elementRef.nativeElement.style.opacity = '1';
}

3. 调整拖拽结束后的逻辑 #

因为拖拽的是副本，所以跨列表拖拽时需要手动处理数据复制（而不是移动原数据）：

onDrop(event: CdkDragDrop<any[]>) {
  if (event.previousContainer !== event.container) {
    // 跨列表拖拽：把数据复制到目标列表
    event.container.data.push(event.item.data);
  }
  // 注意：不要调用transferArrayItem，否则会移动原数据
}

这样设置后，原列表的布局就会完全保持不变——原元素始终留在DOM中，你拖拽的只是它的克隆副本，完美解决你遇到的问题！

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