CODEWITHSUNDEEP
angulardrag-and-dropangular-cdk
Ahmed
Ahmed

Reputation: 581

Angular cdk/drag-drop miltiple cdkDrag elements

I am working on an Angular project and I want to have columns that have elements that can be dropped in any of the columns, Also, I want to drag and drop the column itself to change the order of the columns.

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 It would be helpful if there was a way to have this functionality.

I am currently using cdk/drag-drop to move the elements between the columns but I am stuck at moving the column itself. I went through https://material.angular.io/cdk/drag-drop/examples and I could not find a way to have more than one type of ckdDrag elements within the same page.

Upvotes: 0

Views: 2242

Answers (1)

Eliseo
Eliseo

Reputation: 58019

there's no problem, you can has an array like, e.g.

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

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

See that you enclosed in <div cdkDropListGroup> the "columns"

And the two functions 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
      );
    }
  }

See stackblitz (if you "drag from title" you re-order the "columns")

Upvotes: 2

Related Questions