Step 1
Install ng-drag-drop and build the angular application.
npm i ng-drag-drop
Step 2
Index.html file should contain the necessary CSS and JS files. See the HTML code below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drag and Drop by RG</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<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>
</head>
<body>
<app-root></app-root>
</body>
</html>
Step 3
NgDragDropModule should now be imported into the app.module.ts file.
app.module.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgDragDropModule } from 'ng-drag-drop';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgDragDropModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4
Put the drag-and-drop code into the app at this point. as indicated in the component.ts file below
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor() {}
employeeList = [
{ empName: 'Prinkesha Lathidadiya', designation: 'FullStack Developer' },
{ empName: 'Manasvi Vaghasiya', designation: 'FullStack Developer' },
{ empName: 'Asmita prajapati', designation: 'UI/UX Developer' },
{ empName: 'Rajvi Vaghani', designation: 'UI/UX Developer' },
];
droppedEmployeeList = [
{ empName: 'Krishna Kukadiya', designation: 'QA' },
{ empName: 'Devisha Lathiya', designation: 'Web Developer' },
];
addDragDropdata(e: any) {
this.droppedEmployeeList.push(e.dragData);
console.log(e.dragData);
const index = this.employeeList.indexOf(e.dragData);
if (index > -1) {
this.employeeList.splice(index, 1);
}
}
removeDragDropdata(e: any) {
this.employeeList.push(e.dragData);
const index = this.droppedEmployeeList.indexOf(e.dragData);
if (index > -1) {
this.droppedEmployeeList.splice(index, 1);
}
}
}
I just used a static employee list in the component as an example; if you need a dynamic list, use one instead.
Step 5
Therefore, the HTML code must now be added to the app.component.html file. Put the HTML code using drag and drop.
<section class="mt-5">
<div class="main_conatiner">
<h2 class="text-center mb-5">Drag-and-drop employee movement</h2>
<div class="main">
<div class="sub">
<div droppable (onDrop)="removeDragDropdata($event)">
<h5>Drag and drop datas here</h5>
<div>
<li
class="data_set"
draggable
*ngFor="let data of employeeList"
[dragData]="data"
>
{{ data.empName }} <small> ({{ data.designation }})</small>
</li>
</div>
</div>
</div>
<div class="sub">
<div droppable (onDrop)="addDragDropdata($event)">
<h5>Drag and drop datas here</h5>
<div>
<li
class="data_set"
*ngFor="let data of droppedEmployeeList"
draggable
[dragData]="data"
>
{{ data.empName }} <small> ({{ data.designation }})</small>
</li>
</div>
</div>
</div>
</div>
</div>
</section>
Step 6
The final step is to add some fundamental CSS to the style. file scss/style.css
.main_conatiner{
width: 60%;
margin: 0 auto ;
}
.sub{
width: 45%;
}
.main{
display: flex;
justify-content: space-around;
}
.data_set{
margin-bottom: 10px;
border: 1px solid;
padding: 10px 20px 10px 10px;
border-radius: 5px;
}
.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;
}
Let’s execute the programme and save the code.
Output
