时间戳

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

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

问题描述

我希望能够使用 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);
  }

标签： htmlcssangularweb-applicationsangular-cdk-drag-drop

解决方案

我解释得像一本合上的书。这个想法是将类应用于我们想要拖动的“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中看到一个示例

推荐阅读