Angular › Angular CDK (Component Dev Kit)

How does the Angular CDK's drag and drop module work?

Intermediate

Answer

The CDK Drag and Drop module provides directives that let you make any element draggable and any container a valid drop zone, handling the complex logic of tracking drag position, reordering items, and moving elements between different lists, all without any visual styling forced on you.

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

@Component({
  selector: 'app-list',
  template: `
    <div cdkDropList (cdkDropListDropped)="drop($event)">
      <div *ngFor="let item of items" cdkDrag>{{ item }}</div>
    </div>
  `
})
export class ListComponent {
  items = ['Apple', 'Banana', 'Cherry'];
  drop(event: any) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

Real-world example A task management board lets users drag tasks between a to do column and a done column, using the CDK's drag and drop directives to handle all the reordering logic automatically.

Common follow-ups: How does moveItemInArray actually reorder the underlying array correctly?;How would you allow dragging items between two completely separate lists?

Directives;Standalone Components