In this article we will learn about How to use Drag and Drop items in Angular. Consider the following scenario: you have two list items and can drag and drop data between them. This articles helps to understand how easily we can achieve this example by using Angular. Please read my all Angular Tutorials here.
At the end of article we will see the result like below, we can drag and drop items into two lists in Anular.
Create the Angular App
Create the Angular App and add the install the Angular drag & drop package using below command
// create the Angular App
ng new drag-drop-angular
// Install the package
npm install ng-drag-dropAdd the required CSS & JS in the Index.html
We have added bootstrapping css and script files on the <head> part of the Index.html.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/ng-drag-drop@4.0.0/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>Create a new drag & drop component
Create a new component named as DragDropComponent and add the reference the app.component.html file
<div class="container">
<app-drag-drop></app-drag-drop>
</div>
Import the NgDragDropModule in the app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgDragDropModule } from 'ng-drag-drop';
import { DragDropComponent } from './drag-drop/drag-drop.component';
@NgModule({
declarations: [
AppComponent,
DragDropComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgDragDropModule.forRoot()
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Adding the List Items into the Component
Here we have added two dummy list of data along with the method of Adding Item and removing items.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-drag-drop',
templateUrl: './drag-drop.component.html',
styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent implements OnInit {
constructor() { }
ngOnInit() {
}
Playing11cricketers = [
{ Name: "Rohit Sharma"},
{ Name: "KL Rahul" },
{ Name: "Virat Kohli"},
{ Name: "Surya Kumar Yadav"},
{ Name: "Sanju Samson"},
{ Name: "Hardik Pandya"},
{ Name: "Rabindra Jadeja"},
{ Name: "Yujuvendra Chahal"}
];
Restcricketers = [
{ Name: "Umran Malik"},
{ Name: "Ishaan Kishan" },
{ Name: "Ravi Bishnoi" },
{ Name: "Shardhul Takhur" },
{ Name: "Arshdeep Singh"},
{ Name: "Jasprit Bumrah"},
{ Name: "Md. Siraj"}
];
addDragDropItem(e: any) {
this.Restcricketers.push(e.dragData);
console.log(e.dragData);
const index = this.Playing11cricketers.indexOf(e.dragData);
if (index > -1) {
this.Playing11cricketers.splice(index, 1);
}
}
removeDragDropItem(e: any) {
this.Playing11cricketers.push(e.dragData);
const index = this.Restcricketers.indexOf(e.dragData);
if (index > -1) {
this.Restcricketers.splice(index, 1);
}
}
}
Displaying the List items
droppable (onDrop)="removeDragDropItem($event)"is responsible for removing the items into the list.droppable (onDrop)="addDragDropItem($event)"is responsible for adding the items into the list.draggableis the Ng module features that enable us to drag the items into list.
<div class="row">
<div class="col-sm-3">
<div class="panel m-height panel-default" droppable (onDrop)="removeDragDropItem($event)">
<div class="panel-heading">Drag and drop items here</div>
<div class="panel-body">
<li draggable *ngFor="let item of Playing11cricketers; let i = index" [dragData]="item" class="list-group-item">{{i+1}}. {{item.Name}}
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel m-heightpanel-default" droppable (onDrop)="addDragDropItem($event)">
<div class="panel-heading">Drag and drop items here</div>
<div class="panel-body">
<li *ngFor="let item of Restcricketers; let i = index" class="list-group-item" draggable [dragData]="item">{{i+1}}. {{item.Name}} </li>
</div>
</div>
</div>
</div>
Styling the DragDrop Component
/* You can add global styles to this file, and also import other style files */
.drag-border {
border: #d4000b dashed 2px;
}
.drag-handle {
cursor: move;
cursor: grab;}
.drag-handle:active {
cursor: grabbing;
}
.drag-hint-border {
border: #006d02 solid 2px;
}
.drag-over-border {
border: #000000 solid 2px;
}
.drag-transit {
border: #008bad solid 2px;
}
.m-height{
min-height: 100px;
}That’s it, All done run the application using command ng s --o.
We can see it enables, completely drag and drop list into another list
Conclusion
In this article we discussed about how to use Drag and Drop items in Angular. We create the sample project and implemented drag & drop items.
Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂
Related Articles
- Create a responsive sidebar with Angular Material- Angular 18 Example Series
- How to Deploy Angular 17/18 App in GitHub Pages
- How to convert Text To Speech With Azure Cognitive Services using Angular and .Net Core
- Angular Interceptors- The Complete Guide
- Upload Download and Delete files in Azure Blob Storage using ASP.NET Core and Angular
- How to use Policy-based Authorization using JWT in .Net Core 7 and Angular
- How to deploy Angular App in Azure Static Web App
- Global Error Handling in Angular
- How to host Angular app on AWS S3 bucket using CloudFront
- How to Deploy Angular App in GitHub Pages
Jayant Tripathy
Coder, Blogger, YouTuberA passionate developer keep focus on learning and working on new technology.