Angular cdk/drag-drop 乘以 cdkDrag 元素

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> 中附上了 "columns"

并且两个函数drop

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（如果您 "drag from title" 您重新订购 "columns"）

Angular cdk/drag-drop 乘以 cdkDrag 元素

Angular cdk/drag-drop miltiple cdkDrag elements

drag-and-drop

angular

angular-cdk