问Angular cdk/拖放多个cdkDrag元素

EN

list = [
    { head: "to do", items: ["Get to work", "Pick up groceries", "Go home", "Fall asleep"] },
    { head: "Done", items: ["Get up", "Brush teeth", "Take a shower", "Check e-mail", "Walk dog"] }
  ];

<div cdkDropList (cdkDropListDropped)="dropColumns($event)">
    <div cdkDropListGroup>
        <div class="example-container" *ngFor="let items of list;let i=index" cdkDrag>
            <h2>{{items.head}}</h2>

            <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="items.items"
                class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let item of items.items" cdkDrag>{{item}}</div>
            </div>
        </div>
    </div>
</div>

dropColumns(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.list, event.previousIndex, event.currentIndex);
  }
  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
      );
    }
  }