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.