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

【问题标题】：Is it possible to keep the styling of the original container when dragging one element of a container to another using CDKdraganddrop使用 CDKdraganddrop 将容器的一个元素拖动到另一个元素时，是否可以保持原始容器的样式
【发布时间】：2020-03-19 14:50:57
【问题描述】：

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

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);
  }

【问题讨论】：

你可以做到这一点，“颜色”不依赖于元素所在的“div”（使用 [style.color]="item.property"，例如）记住拖放它只是不同数组的交换元素和 Angular 显示元素。就像你有两个输入并使用 splice 根据两个输入的值交换两个数组的元素
我不太清楚你的意思。我希望人组的背景即使在进入工作室组时也能保留下来。请您进一步解释一下吗？

标签： html css angular web-applications angular-cdk-drag-drop

【解决方案1】：

我的解释就像一本合上的书。这个想法是将类应用于我们想要拖动的“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}))

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

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

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

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

并使用“类型”将这个类添加到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>

你可以在stackblitz看到一个例子

【讨论】：