The drag-and-drop functionality includes support for free dragging, sorting within the list, transferring elements between the lists, animations, and a custom drag-and-drop builder.
To create a drag-and-drop functionality in Angular, use the @angular/cdk/drag-drop module.
Here is the step-by-step guide:
Step 1: Setup an Angular Project
To create an Angular 18 Project using Angular CLI, type the below command:
ng new drag-app
Go inside the project folder:
cd drag-app
Step 2: Install Angular Material
You can install the Angular Material library in your existing project using this command:
ng add @angular/material
Also, you need to install the @angular/cdk/drag-drop module using the below command:
npm install @angular/cdk/drag-drop
Step 3: Create a drag-and-drop component
To create a new component, use this command:
ng generate component DragDropList
It will create a folder inside the src/app directory called “drag-drop-list”.
Inside the “drag-drop-list” folder, there are four files are generated:
- drag-drop-list.component.css
- drag-drop-list.component.html
- drag-drop-list.component.spec.ts
- drag-drop-list.component.html
Step 4: Add logic to handle drag-and-drop
In Angular, you write the logic inside the .ts file. The .html file is for the user interface that displays components based on the written logic inside the .ts file.
Open the src/app/drag-drop-list/drag-drop-list.component.ts file and add the below code:
import { Component } from '@angular/core'; import { CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray, } from '@angular/cdk/drag-drop'; @Component({ selector: 'app-drag-drop-list', standalone: true, imports: [CdkDropList, CdkDrag], templateUrl: './drag-drop-list.component.html', styleUrl: './drag-drop-list.component.css', }) export class DragDropListComponent { items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; drop(event: CdkDragDrop<string[]>) { moveItemInArray(this.items, event.previousIndex, event.currentIndex); } }
We imported CdkDragDrop, CdkDropList, CdkDrop, and moveItemInArray from the “@angular/cdk/drag-drop” module to create draggable and droppable items within an Angular application.
In the class DragDropListComponent, we defined an array property called items.
This items property contains different items that we will use to drag and drop and sort the list based on our requirements.
In the next step, we defined the drop() method triggered when a drag-and-drop event is completed. It accepts an event of type CdkDragDrop<string[]>. So, when the user drags the item, this function changes the index based on where the user drops that item.
The moveItemInArray() reorders the items array based on the drag-and-drop action.
Step 5: Add HTML Code
We wrote the logic to drag-and-drop the list of items, and now the remaining thing is to display in visual representation. Write the following code inside the src/app/drag-drop-list/drag-drop-list.component.html file:
<div cdkDropList (cdkDropListDropped)="drop($event)"> @for (item of items; track item) { <div class="example-box" cdkDrag>{{ item }}</div> } </div>
Add the CSS code inside the src/app/drag-drop-list/drag-drop-list.component.css file:
.example-box { padding: 20px; margin-bottom: 5px; background: #e3f2fd; border: 1px solid #90caf9; border-radius: 4px; cursor: move; }
Save this file and start the development server using this command:
ng serve --open
And you will see the output like this before drag-and-drop:
Now, let’s drag and drop the list of items and see the result:
The above screenshot shows that we changed the position of each item in the list, which makes it very easy to sort the list based on your requirements.
Saranya Sekar
ERROR in src/app/app.component.ts(21,56): error TS2339: Property ‘getStudents’ does not exist on type ‘StudentService’.
src/app/student.service.ts(29,3): error TS2662: Cannot find name ‘constructor’. Did you mean the static member ‘StudentService.constructor’?
src/app/student.service.ts(31,3): error TS2304: Cannot find name ‘public’.
src/app/student.service.ts(31,10): error TS2304: Cannot find name ‘getStudents’.
src/app/student.service.ts(31,25): error TS2693: ‘any’ only refers to a type, but is being used as a value here.
src/app/student.service.ts(32,12): error TS2304: Cannot find name ‘studentsObservable’.
src/app/student.service.ts(38,13): error TS2304: Cannot find name ‘studentsObservable’.
Divya
Hi,
I need to move the item from one div to another.. but Div should not be cdkDropList. Random arrangemement of items inside div.
Claudio Almeida
The student service you need to close the students array by putting a ] in the place of the ,