Menu Close
  • Home
  • How to use Drag and Drop items in Angular
    •

How to use Drag and Drop items in Angular

admin 0 Comments
Post Views: 1,963

In this article we will learn about How to use Drag and Drop items in Angular. Consider the following scenario: you have two list items and can drag and drop data between them. This articles helps to understand how easily we can achieve this example by using Angular. Please read my all Angular Tutorials here.

At the end of article we will see the result like below, we can drag and drop items into two lists in Anular.

Get Source Code here

Create the Angular App

Create the Angular App and add the install the Angular drag & drop package using below command

// create the Angular App
ng new drag-drop-angular
// Install the package
npm install ng-drag-drop

Add the required CSS & JS in the Index.html

We have added bootstrapping css and script files on the <head> part of the Index.html.

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

Create a new drag & drop component

Create a new component named as DragDropComponent and add the reference the app.component.html file

<div class="container">
  <app-drag-drop></app-drag-drop>
</div>

Import the NgDragDropModule in the app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgDragDropModule } from 'ng-drag-drop';
import { DragDropComponent } from './drag-drop/drag-drop.component';
@NgModule({
  declarations: [
    AppComponent,
    DragDropComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgDragDropModule.forRoot()
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding the List Items into the Component

Here we have added two dummy list of data along with the method of Adding Item and removing items.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  Playing11cricketers = [
    { Name: "Rohit Sharma"},
    { Name: "KL Rahul" },
    { Name: "Virat Kohli"},
    { Name: "Surya Kumar Yadav"},
    { Name: "Sanju Samson"},
    { Name: "Hardik Pandya"},
    { Name: "Rabindra Jadeja"},
    { Name: "Yujuvendra Chahal"}
  ];

  Restcricketers = [
    { Name: "Umran Malik"},
    { Name: "Ishaan Kishan" },
    { Name: "Ravi Bishnoi" },
    { Name: "Shardhul Takhur" },
    { Name: "Arshdeep Singh"},
    { Name: "Jasprit Bumrah"},
    { Name: "Md. Siraj"}
  ];

  addDragDropItem(e: any) {
    this.Restcricketers.push(e.dragData);
    console.log(e.dragData);
    const index = this.Playing11cricketers.indexOf(e.dragData);
    if (index > -1) {
      this.Playing11cricketers.splice(index, 1);
    }
  }

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

Displaying the List items

  • droppable (onDrop)="removeDragDropItem($event)" is responsible for removing the items into the list.
  • droppable (onDrop)="addDragDropItem($event)" is responsible for adding the items into the list.
  • draggable is the Ng module features that enable us to drag the items into list.
    <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 Playing11cricketers; let i = index" [dragData]="item" class="list-group-item">{{i+1}}.  {{item.Name}} 
            </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 Restcricketers; let i = index" class="list-group-item" draggable [dragData]="item">{{i+1}}.  {{item.Name}} </li>
            </div>
          </div>
        </div>
    </div>

Styling the DragDrop Component

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

That’s it, All done run the application using command ng s --o.

We can see it enables, completely drag and drop list into another list

Get Source Code here

Conclusion

In this article we discussed about how to use Drag and Drop items in Angular. We create the sample project and implemented drag & drop items.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂

Related Articles

Jayant Tripathy
Coder, Blogger, YouTuber

A passionate developer keep focus on learning and working on new technology.

Tagged ,

Leave a Reply

Your email address will not be published.