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

Rajesh Gami
Nov 23, 2022

36.7k
0
5
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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)