使用CDK Drag and Drop实现跨容器拖拽保留原样式及多容器元素合并

我明白你现在遇到的困扰：把不同容器里的元素拖到同一个目标容器时，元素会继承目标容器的样式，丢了原来的背景色。核心问题其实是你原来的数据只存了文本内容，没携带样式相关的信息，所以渲染时只能用目标容器的默认类。下面是具体的解决步骤：

1. 改造数据结构，携带样式类信息 #

把原来的字符串数组改成对象数组，每个对象包含元素的文本内容和对应的样式类名。比如在你的组件TS文件里：

// 原来的studio6是字符串数组，现在改成对象数组
studio6 = [
  { name: '你的元素内容1', className: 'movie-block' },
  { name: '你的元素内容2', className: 'movie-block' }
];

// 原来的MoviesList同理改造
MoviesList = [
  { name: '人物元素1', className: 'peopleblock' },
  { name: '人物元素2', className: 'peopleblock' }
];

2. 修改HTML模板，动态绑定样式类 #

在每个拖拽元素上，用[class]指令绑定到对象的className属性，这样不管元素被拖到哪个容器，都会使用自己携带的样式类：

Studio 6容器的HTML修改： #

<h2>Studio 6</h2>
<div cdkDropList #donestudio6="cdkDropList" [cdkDropListData]="studio6" [cdkDropListConnectedTo]="[moviesList, toglist, ppolist]" class="movie-list" (cdkDropListDropped)="onDrop($event)">
  <!-- 用[class]绑定item.className，渲染元素文本用item.name -->
  <div *ngFor="let item of studio6" [class]="item.className" cdkDrag>{{item.name}}</div>
</div>

People容器的HTML修改： #

<div id="first" class="bottompanel">
  <h2>People</h2>
  <div cdkDropList #moviesList="cdkDropList" [cdkDropListData]="MoviesList" [cdkDropListConnectedTo]="[doneMovieList, donestudio2, donestudio3, donestudio4, donestudio5, donestudio6, donestudio7]" class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <!-- 同样绑定className，文本用item.name -->
    <div *ngFor="let item of MoviesList" [class]="item.className" cdkDrag>{{item.name}}</div>
  </div>
</div>

3. 确保拖拽逻辑正确传递完整对象 #

你的onDrop方法不需要大改，只要确保使用CDK提供的transferArrayItem和moveItemInArray方法，它们会完整地把整个对象（包含className）从原容器数组转移到目标容器数组：

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

// ...

onDrop(event: CdkDragDrop<any[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

这样修改后，不管你把peopleblock样式的元素拖到Studio 6容器，还是把movie-block的元素拖到People容器，元素都会保留自己原来的背景色，不会被目标容器的样式覆盖啦。

内容的提问来源于stack exchange，提问作者j.baegs