Drag And Drop Items Using Angular(v2 to v14) | RAJESH GAMI

 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
JavaScript

Step 2

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

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 { }
JavaScript

 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);
    }
  }
}
JavaScript

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>
Markup

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;
}
CSS

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.

No comments:

Post a Comment

RAJESH GAMI - Blog

Digital Signature Pad in Angular | RAJESH GAMI

  What is Signature Pad? Signature Pad could be a JavaScript library for drawing fancy signatures. It supports HTML5 canvas and uses variabl...