Is it possible to keep the styling of the original container when dragging one element of a container to another using 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);
  }

you can do that the "color" not depend of the "div" where is the element (using [style.color]="item.property", e.g.) Remember that drag and drop it's only interchange elements of differents arrays and Angular show the elements. Is as you has two inputs and use splice to interchange elements of two arrays acording the value of the two inputs — Eliseo, Mar 19 '20 at 16:13
I'm not quite sure what you mean. I want the background of the people group to stay even when its dropped into the studio group. could you explain further please ? — j.baegs, Mar 20 '20 at 14:17

score 0 · Answer 1 · answered Mar 21 '20 at 11:06

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

Is it possible to keep the styling of the original container when dragging one element of a container to another using CDKdraganddrop

1 Answers1