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

Question

I want to be able to add multiple elements from different containers into one container using CDK drag and drop. Is it possible to essentially colour code the different items. Right now when I drag an item it inherits the styling from the container its dropped into and i want it to keep its colour that was in the original container.

HTML

  <h2>Studio 6</h2>
        <div cdkDropList #donestudio6="cdkDropList" [cdkDropListData]="studio6"
          [cdkDropListConnectedTo]="[moviesList, toglist, ppolist]" class="movie-list" 
(cdkDropListDropped)="onDrop($event)">
          <div class="movie-block" *ngFor="let item of studio6" cdkDrag>{{item}}</div>
        </div>

   <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)">
          <div class="peopleblock" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
        </div>

CSS

  .movie-block {
    padding: 10px 5px;
    border-bottom: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    background: white;
    font-size: 12px;
  }

  .peopleblock {
    padding: 10px 5px;
    border-bottom: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    background: white;
    font-size: 12px;
    background-color: rgb(53, 201, 206);
  }

Answer 1

I'm explain like a closed book. The idea is that the class is applied to the "div" we want drag. To get it, we can add a new property to our objects. Imagine you has some like

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

We can do some like

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

If the array is an array of object simply add the new variable using a forEach

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

Now, we can use two class

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

And use the "type" to add this class to the 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>

You can see an example in stackblitz