How to create drag and drop accordion list in Angular

Published on June 4th, 2021

In this article, I’d like to share with you how to create a list of accordion items, which also supports the drag and drop functionality.

We will build two lists, the first is the list of unassigned tasks, and the second is the list of assigned tasks. Users can drag each task and reorder it within the list, or move it from one list to another list.

The end result of this tutorial is as follows.

So let’s get started…

First we need to import two modules DragDropModule and MatExpansionModule from Angular material.

1import { DragDropModule } from "@angular/cdk/drag-drop";
2import { MatExpansionModule } from "@angular/material";

To build the accordion list, we need some mock data to display. In the component class, we declare two lists of data, the first is unassignedTasks and the second is assignedTasks.

1export class AppComponent {
2  unassignedTasks: Task[] = [
3    {
4      id: "1",
5      title: "Task 1",
6      description: "This is task 1",
7    },
8    {
9      id: "2",
10      title: "Task 2",
11      description: "This is task 2",
12    },
13    {
14      id: "3",
15      title: "Task 3",
16      description: "This is task 3",
17    },
18  ];
19
20  assignedTasks: Task[] = [
21    {
22      id: "4",
23      title: "Task 4",
24      description: "This is task 4",
25    },
26    {
27      id: "5",
28      title: "Task 5",
29      description: "This is task 5",
30    },
31    {
32      id: "6",
33      title: "Task 6",
34      description: "This is task 6",
35    },
36  ];
37}

In order to make the task list data type-safe, we define an interface for it, for the sake of simplicity, it will contain only the id, title, and description.

1export interface Task {
2  id: string;
3  title: string;
4  description: string;
5}

Next, we will use the mat-accordion and mat-expansion-panel of Angular material to create a list of accordion panels for unassigned tasks. We do the same for assigned tasks list.

1<mat-accordion>
2  <mat-expansion-panel *ngFor="let task of unassignedTasks">
3    <mat-expansion-panel-header>
4      <mat-panel-title> {{ task.title }} </mat-panel-title>
5      <mat-panel-description> {{ task.description }} </mat-panel-description>
6    </mat-expansion-panel-header>
7    <p>This is the primary content of the panel.</p>
8  </mat-expansion-panel>
9</mat-accordion>

So now we have two lists of accordion items.

Next, we will add the drag and drop functionality for every list by adding the cdkDropList directive to mat-accordion component, and cdkDrag to mat-expansion-panel component.

1<mat-accordion
2  cdkDropList
3  #unassignedList="cdkDropList"
4  [cdkDropListData]="unassignedTasks"
5  [cdkDropListConnectedTo]="[assignedList]"
6  (cdkDropListDropped)="drop($event)"
7>
8  <mat-expansion-panel cdkDrag *ngFor="let task of unassignedTasks">
9    <mat-expansion-panel-header>
10      <mat-panel-title> {{ task.title }} </mat-panel-title>
11      <mat-panel-description> {{ task.description }} </mat-panel-description>
12    </mat-expansion-panel-header>
13    <p>This is the primary content of the panel.</p>
14  </mat-expansion-panel>
15</mat-accordion>

Here, we add the line [cdkDropListConnectTo]="[assignedList]" to allow the user to drag an item from this list and drop it to the assigned task list.

The drop method will look like this.

1import {
2  CdkDragDrop,
3  moveItemInArray,
4  transferArrayItem
5} from "@angular/cdk/drag-drop";
6
7drop(event: CdkDragDrop<Task[]>) {
8    if (event.previousContainer === event.container) {
9      moveItemInArray(
10        event.container.data,
11        event.previousIndex,
12        event.currentIndex
13      );
14    } else {
15      transferArrayItem(
16        event.previousContainer.data,
17        event.container.data,
18        event.previousIndex,
19        event.currentIndex
20      );
21    }
22  }

The code in if block handles the case when user moves items around its container, we will move it in the correct position. The code in else block handles the case when use drags an item from one list to another list, we call transferArrayItem to do that.

The moveItemInArray and transferArrayItem methods are imported from @angular/cdk/drag-drop package.

Conclusion

In this article, I showed you how to built two lists of accordion panel, which also have the drag and drop functionality supported.

You can find the full example code at the link here.

Thanks for reading and have a great day!