拖放带有对象数组的拖放答案

【问题标题】：Drag an drop with array of objects拖放带有对象数组的拖放
【发布时间】：2020-06-03 21:14:22
【问题描述】：

我有两个对象数组，一个 A 和一个 B。

我有一个列表，我打算将对象从 A 拖到 B，从 B 拖到 A。

我的问题是，当我将所有对象从 A 拖到 B 或从 B 拖到 A 时，尝试将对象传递到空列表时，它停止工作。

drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

【问题讨论】：

标签： angular typescript angular-material angular-cdk angular-dragdrop

【解决方案1】：

如果 box-list 为空，则附加事件的 div 的高度将为 0px：

解决方法是添加一个高度为 100% 的属性：

style="height:100%"

试试这个：

<div class="six" style=" height: 75%;">
  <div class="card-deck cardsZone">
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;"  #activeList="cdkDropList"
      class="box-list" style="height:100%"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="A"
      [cdkDropListConnectedTo]="[inactiveList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let nw of A" cdkDrag>
        <div class="card mysmallCcards">             
          <div class="card-body">
                   <span>{{nw.name}}</span>         
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;" #inactiveList="cdkDropList"
      class="box-list" style="height:100%"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="B"
      [cdkDropListConnectedTo]="[activeList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let pr of B" cdkDrag>
        <div class="card mysmallCcards">
          <div class="card-body">
           <span>{{pr.name}}</span>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：