How To Drag And Drop Items Using Angular(v2 to v14)

How to Drag & Drop Items using Angular(v2 to v14)

Step 1

Create the angular app and install ng-drag-drop

npm i ng-drag-drop

Step 2

Put required CSS and js file into index.html file, See below HTML code,

<!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/[email protected]/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

Now import the NgDragDropModule in the app.module.ts file

app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgDragDropModule } from 'ng-drag-drop'; //Import NgDragDropModule module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgDragDropModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4

Now put the drag and drop code into the app.component.ts file as shown below

import { Component, ViewChild  } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor() { }
 
  // Here I have used the static employeeList you can use dynamic employeeList
  employeeList = [
    { empName: "Rajesh Gami", designation: "FullStack Developer" },
    { empName: "Subhash Saliya", designation: "FullStack Developer" },
    { empName: "Sirish Upadhyay", designation: "UI/UX Developer" }
  ];

  droppedEmployeeList = [
    { empName: "Jaydeep Patel", designation: "QA" },
    { empName: "Moin Bloch", designation: "Web Developer" },
  ];

  addDragDropItem(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);
    }
  }

  removeDragDropItem(e: any) {
    this.employeeList.push(e.dragData);
    const index = this.droppedEmployeeList.indexOf(e.dragData);
    if (index > -1) {
      this.droppedEmployeeList.splice(index, 1);
    }
  }
}

In the component I have used static employee list just for the example, So you can use dynamic list as your requirement.

Step 5

So now need to put the HTML code into the app.component.html file. Let's put the drag and drop HTML code

<div>
  <h3>Move Employee via Drag Drop</h3>
  <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 employeeList" [dragData]="item" class="list-group-item"> {{item.empName}} <small> ({{item.designation}})</small>
          </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 droppedEmployeeList" class="list-group-item" draggable [dragData]="item">{{item.empName}} <small> ({{item.designation}})</small></li>
          </div>
        </div>
      </div>
  </div>
</div>

Step 6

This is last step to add some basic CSS in the style.scss/style.css file

/* 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;
}

Let's save the code and run the application

Output

How to Drag & Drop Items using Angular(v2 to v14)

You can move employee from one box to another box, Let's move Rajesh Gami from the left box to the right side box

How to Drag & Drop Items using Angular(v2 to v14)

Simply drag the employee using your mouse click and drop it into the box.