Angular拖拽可复用组件需求：保留原组件生成N份副本并拖拽

嘿，这个需求很清晰，我帮你梳理出一套基于Angular CDK DragDrop的实现方案，完美满足保留原始组件、生成可移动副本、支持N次拖拽的要求：

先明确几个核心要点，避免走偏：

• 原始组件固定不动，不绑定任何拖拽指令
• 左侧拖拽源只作为「触发生成副本」的入口，支持无限次拖拽操作
• 每次拖拽到目标区域，就生成一个原始组件的副本，并且副本可以在目标区域内自由移动

1. 先搞定依赖导入 #

首先确保你的项目里已经安装了Angular CDK，然后在模块里导入拖拽模块：

import { DragDropModule } from '@angular/cdk/drag-drop';

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

2. 编写模板结构 #

把原始组件、拖拽源、副本容器清晰分开：

<div class="drag-wrapper">
  <!-- 原始组件（固定不可移动） -->
  <div class="original-box">
    <app-your-original-component></app-your-original-component>
    <p class="hint">这是原始组件，不会被移动</p>
  </div>

  <!-- 左侧拖拽源（支持N次拖拽） -->
  <div class="drag-source" cdkDrag [cdkDragData]="'copy-trigger'">
    <p>拖拽我生成组件副本</p>
  </div>

  <!-- 副本容器（可移动副本的目标区域） -->
  <div class="drop-area" cdkDropList (cdkDropListDropped)="handleDrop($event)">
    <div class="copy-item" *ngFor="let copy of componentCopies; index as i" cdkDrag>
      <app-your-original-component></app-your-original-component>
      <p>副本 {{i + 1}}</p>
    </div>
  </div>
</div>

3. 实现组件逻辑 #

在组件类里处理拖拽放下事件，每次拖拽就新增一个副本，同时支持副本在容器内的排序：

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

@Component({
  selector: 'app-drag-copy-manager',
  templateUrl: './drag-copy-manager.component.html',
  styleUrls: ['./drag-copy-manager.component.css']
})
export class DragCopyManagerComponent {
  // 存储所有组件副本的数组，数组长度就是副本数量
  componentCopies: Array<{}> = [];

  handleDrop(event: CdkDragDrop<Array<{}>>) {
    // 判断是从左侧拖拽源拖过来的，就新增副本
    if (event.previousContainer !== event.container) {
      this.componentCopies.push({});
    } else {
      // 如果是在副本容器内拖拽，调整副本顺序
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
}

4. 加一点基础样式（可选） #

让布局更直观，方便测试：

.drag-wrapper {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

.original-box {
  border: 2px solid #27ae60;
  padding: 1.5rem;
  min-width: 200px;
}

.drag-source {
  border: 2px dashed #3498db;
  padding: 1.5rem;
  cursor: grab;
  min-width: 200px;
  text-align: center;
  background-color: #f8f9fa;
}

.drop-area {
  flex: 1;
  border: 2px solid #e74c3c;
  padding: 1.5rem;
  min-height: 500px;
}

.copy-item {
  border: 1px solid #95a5a6;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
}

.hint {
  font-size: 0.9rem;
  color: #7f8c8d;
}

• 原始组件安全：原始组件所在的容器没有绑定cdkDrag，所以完全不会被拖拽，保证原始组件始终在固定位置
• N次拖拽支持：左侧拖拽源每次被拖到目标区域，都会往componentCopies数组里添加一个空对象，*ngFor就会自动渲染新的副本，理论上支持无限次拖拽
• 副本移动功能：每个副本都绑定了cdkDrag，目标区域是cdkDropList，所以副本可以在容器内自由拖拽调整顺序

内容的提问来源于stack exchange，提问作者Code Lღver