Angular CDK's cdkDropList + cdkDrag directives turn a container into a sortable list. The list emits cdkDropListDropped with previous/current indices; the consumer mutates the backing array (typically via moveItemInArray or transferArrayItem). Multiple lists wired through cdkDropListConnectedTo let items move between them.
<div cdkDropList [cdkDropListData]="items" (cdkDropListDropped)="onDrop($event)">
@for (item of items; track item) {
<div class="task-item" cdkDrag>{{ item }}</div>
}
</div>
import { Component } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'my-drag-drop-demo',
templateUrl: './my-drag-drop-demo.component.html',
imports: [DragDropModule],
})
export class MyDragDropDemoComponent {
items = ['Apple', 'Banana', 'Cherry', 'Date'];
onDrop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}