Html 使用cdkdragandrop将容器的一个元素拖动到另一个元素时，是否可以保持原始容器的样式

我希望能够使用CDK拖放将不同容器中的多个元素添加到一个容器中。是否可以对不同的项目进行颜色编码。现在，当我拖动一个项目时，它继承了它放入的容器中的样式，我希望它保持原来容器中的颜色

HTML

---

我就像一本闭着的书。其思想是将该类应用于我们想要拖动的“div”。要获得它，我们可以向对象添加一个新属性。想象一下你有一些

  people:any[] = ['Alice','George','Peter','John'];
  movies:any[] = ['Start Wars','The thing','It'];

this.people=this.people.map(x=>({name:x,type:1}))
this.movies=this.movies.map(x=>({name:x,type:2}))

我们可以做一些类似的事情

  people:any[] = ['Alice','George','Peter','John'];
  movies:any[] = ['Start Wars','The thing','It'];

this.people=this.people.map(x=>({name:x,type:1}))
this.movies=this.movies.map(x=>({name:x,type:2}))

如果数组是对象数组，只需使用forEach添加新变量

this.people.forEach(x=>{x.type=1})

现在，我们可以使用两个类

.peopleClass
{
   background:yellow!important;
}
.movieClass
{
  background:red!important;
  color:white!important;
}

并使用“type”将此类添加到div中

<div class="example-container">
  <h2>Studio</h2>
  <div
    cdkDropList
    #studioList="cdkDropList"
    [cdkDropListData]="studio"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <!--see how we use ngClass to add a class to the div-->
    <div class="example-box" 
         [ngClass]="{'peopleClass':item.type==1,'movieClass':item.type==2}"  
         *ngFor="let item of studio" cdkDrag>
      <span >{{item.name}}
        </span>
      </div>
  </div>
</div>

演播室
{{item.name}

---

您可以在

中看到一个示例，您可以做到“颜色”不依赖于元素所在的“div”（使用[style.color]=“item.property”），例如。请记住，拖放仅是不同数组的交换元素，角度显示元素。因为你有两个输入，使用拼接来交换两个数组的元素，根据两个输入的值，我不太清楚你的意思。我希望人物组的背景保持不变，即使它进入了演播室组。请你进一步解释一下好吗？