Можно ли сохранить стилизацию исходного контейнера при перетаскивании одного элемента контейнера в другой с помощью CDKdraganddrop - PullRequest
Новая
       55

Можно ли сохранить стилизацию исходного контейнера при перетаскивании одного элемента контейнера в другой с помощью CDKdraganddrop

0 голосов
/ 19 марта 2020

Я хочу иметь возможность добавлять несколько элементов из разных контейнеров в один контейнер с помощью перетаскивания 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);
  }

1 Ответ

0 голосов
/ 21 марта 2020

Я объясняю как закрытая книга. Идея в том, что класс применяется к «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

...