Drag and Drop Using Angular 7

Drag and drop is one of the new features which is provided by Angular 7. Angular 7 makes it very easy to implement this feature. So here, in this blog, we are going to learn how to drag and drop the items from a list of numbers using a basic example.

Before getting started with the implementation there are some basic pre-requisites which are necessary. If you are still using Angular CLI 6, then  you have to upgrade your Angular CLI version to Angular CLI 7.

You can check the version of Angular CLI you are using in your system with just one command given below:

 ng version

Now one more the basic necessities for implementing Drag and Drop is to install Angular CDK Animation. You can install this using the command given below:

 npm i –save @angular/cdk @angular/animations

So now we are all set to start with the implementation as we already installed all the dependencies.

1. Firstly, we need to import the drag and drop module in app.module.ts.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {DragDropModule} from '@angular/cdk/drag-drop';

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

2. Now switch to its component file, i.e app.component.ts, where we write the business logic. Here, first add numbers (items) in an array like shown below:

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Drag-Drop Tutorials';
  allNumbers: number[] = [];

  constructor() {
    for (let insertNumbers = 0; insertNumbers <= 100; insertNumbers++) {
      this.allNumbers.push(insertNumbers);
    }
  }
}

In the above code, we declare an array name, allNumbers, in which we push or insert the numbers in an array from 0 to 100.

3. To display a list of all the numbers on the user interface we need to write the HTML code for that in the the app.component.html file.

In this HTML file, we include cdkDroplist and everything here will go under cdkDropList. Also, another thing we add here is cdkDrag, which helps in dragging the elements to change their place. And for making some attractive aesthetics we write some CSS in the app.component.css file.

.display-list-of-numbers {
  height: 100px;
  width: 100%;
  border: 3px solid dodgerblue;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

4. So now we need a cdkDropList method with the prefix dropped, which adds drop event to the method. This ensures the proper drag and drop mechanism occurs between the list of elements.

5. You can see in the above code there is one method, drop($event), which is responsible for dropping an item. To define the drop method we need to write the definition of this method in its TS file.

drop(event: CdkDragDrop<number[]>) {
  moveItemInArray(this.allNumbers, event.previousIndex, event.currentIndex);
}

In this code, we define a method name, drop, and pass a drop event via the CdkDragDrop event provided by Angular CDK and pass in array of numbers.

6. Moving further we call a built-in method inside the drop method, i.e moveItemInArray, which is a part of the CDK and we are going to pass their three things here:

• number array

• previous index

• current index

And, these three things are enough to move the index of an item as you can see in the result below.

Now you can see that the number 0 is shifted or dragged in place of 2 and its position is changed as compared with the previous image.

Conclusion 

After following this post, I hope you will be able to drag and drop any element from the list of numbers using Angular 7 with just following a few simple steps.

Thanks for reading!