Drag and Drop

Angular CDK provides drag-and-drop functionality.

Install module:

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

TypeScript

import { Component } from "@angular/core";
import { DragDropModule } from "@angular/cdk/drag-drop";

@Component({
  selector: "app-drag",
  standalone: true,
  imports: [DragDropModule],
  templateUrl: "./drag.component.html",
})
export class DragComponent {
  items = ["Item 1", "Item 2", "Item 3"];
}

HTML

<div cdkDropList>
  <div *ngFor="let item of items" cdkDrag>{{ item }}</div>
</div>