Question

我正在一个Angular项目中工作，我想让某些列的元素可以放置在任何列中。此外，我想拖放该列本身来更改列的顺序。

Here is moving the elements between the columns From Trello which I already have

And here is the functionality of changing the order of the columns From Trello that I want to implement 如果有一种方法可以使用此功能，将很有帮助。

我目前正在使用cdk / drag-drop在各列之间移动元素，但是我仍然坚持移动列本身。我经历了https://material.angular.io/cdk/drag-drop/examples，但找不到在同一页面中包含多种类型的ckdDrag元素的方法。

Answer 1

没问题，您可以拥有一个数组，例如

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>

看到您在<div cdkDropListGroup>的“列”中加上了

这两个函数掉了

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

请参见stackblitz（如果您“从标题中拖动”，则需要重新排列“列”）

角cdk /拖放多个cdk拖动元素

1 个答案: