How to Use Angular CDK for Drag and Drop

Angular CDK provides a powerful drag-and-drop module that handles sorting, transferring between lists, and animations out of the box.

Step 1 — Install Angular CDK

npm install @angular/cdk

Step 2 — Sortable List

import { Component } from '@angular/core';
import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  standalone: true,
  imports: [DragDropModule],
  template: `
    <ul cdkDropList (cdkDropListDropped)="onDrop($event)" class="list">
      @for (item of items; track item.id) {
        <li cdkDrag class="item">
          {{ item.name }}
          <div class="drag-handle" cdkDragHandle>⠿</div>
        </li>
      }
    </ul>
  `,
})
export class SortableListComponent {
  items = [
    { id: 1, name: 'Design' },
    { id: 2, name: 'Development' },
    { id: 3, name: 'Testing' },
    { id: 4, name: 'Deployment' },
  ];

  onDrop(event: CdkDragDrop<typeof this.items>): void {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

Step 3 — Transfer Between Lists (Kanban)

import { transferArrayItem } from '@angular/cdk/drag-drop';

columns = {
  todo:  [{ id: 1, title: 'Task A' }],
  doing: [{ id: 2, title: 'Task B' }],
  done:  [{ id: 3, title: 'Task C' }],
};

onDrop(event: CdkDragDrop<any[]>): void {
  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,
    );
  }
}

<div cdkDropListGroup>
  @for (col of columns | keyvalue; track col.key) {
    <div [cdkDropList]="col.value" (cdkDropListDropped)="onDrop($event)">
      <div *ngFor="let item of col.value" cdkDrag>{{ item.title }}</div>
    </div>
  }
</div>