Угловой CDK перетащить в зоны - PullRequest
Новая
       3

Угловой CDK перетащить в зоны

0 голосов
/ 05 ноября 2019

Для жизни я не могу понять, как иметь несколько зон, в которые вы можете попасть. Я должен сделать это динамически, так как количество зон может меняться в зависимости от канала HTTP JSON.

Вот мой угловой шаблон: 

<div cdkDropListGroup> 
<div class="categories-wrapper">
<div class="dd-container" #desc>
<div class="row" *ngFor="let item of descs; index as i">
    <div class="col-sm">
            <div class="desc-box" [attr.data-id]="item.id" >{{item.text}}</div>
    </div>
    <div class="col-sm">
        <div cdkDropList
            [attr.id]="droplist + i"
            [cdkDropListData]="drops + i"
            class="dd-list"
            [cdkDropListConnectedTo]="[draglist]"
            (cdkDropListDropped)="drop($event)">    
            <div class="dd-box" appHighlight [attr.data-id]="item.description_id" *ngFor="let item of drops[i]" cdkDrag>{{item.term}}</div>
        </div>
    </div>
</div>
</div>

</div>

<div class="dd-container" [style.display]="canSubmit ? 'none' : 'block'">
  <p>Terms<span class="ins">(Drag terms below next to the proper description above.)</span></p>
  <div class="categories-wrapper">
  <div
    cdkDropList
    #draglist="cdkDropList"
    [cdkDropListData]="drags"
    class="dd-list"
    [cdkDropListConnectedTo]="[droplist1]"
    (cdkDropListDropped)="drop($event)"
    >            
    <div class="dd-box" appHighlight [attr.data-id]="item.description_id" *ngFor="let item of drags" cdkDrag>{{item.term}}</div>
  </div>
</div>
</div>
</div>
</div>

Я прилагаю картинку, чтобы показать вам дропзоны, которые отображаются справа от описаний, которым они должны соответствовать.

enter image description here

Я добавил цикл, который рисует описание и удаляет его, и у меня есть приращение идентификатора, равное droplist + i, поэтому каждый из них имеет уникальный идентификатор.

...