Angular 角度cdk/拖放多个cdkDrag元素

我正在处理一个角度项目，我希望列中的元素可以放置在任何列中，同时，我希望拖放列本身以更改列的顺序

如果有一种方法可以实现此功能，这将非常有用

---

我目前正在使用cdk/拖放来移动列之间的元素，但我无法移动列本身。我浏览了一遍，没有找到一种方法在同一页面中包含多种类型的ckdDrag元素

没有问题，您可以使用如下数组：

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"] }
  ];

一个.html

<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>

{{items.head}
{{item}}

请参见您在

中所附的“列”

这两个函数都下降了

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
      );
    }
  }

dropColumns（事件：CdkDragDrop）{
moveItemInArray（this.list、event.previousIndex、event.currentIndex）；
}
drop（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray(
event.container.data，
event.previousIndex，
event.currentIndex
);
}否则{
转让协议(
event.previousContainer.data，
event.container.data，
event.previousIndex，
event.currentIndex
);
}
}

请参阅（如果“从标题拖动”，则重新排列“列”）