Angular Drag and drop lists

With the Angular 7 update came many new features to the Angular framework, one the more exciting updates was Angular drag and drop functionality. In this guide, I will show you how you can use this feature to create quick and easy drag and drop features in your web application. I assume that you have some basic knowledge of how to work with Angular.

Setup

In order to use the drag and drop feature, you must be using Angular version 7 or above. Once you have made sure that your Angular version is up to date, we can install the CDK package. This is done using the following command inside your Angular project.

ng add @angular/cdk

Next we need to import the DragDropModule in our app module.
In the top of the app.module.ts file, add the following line.

import { DragDropModule } from '@angular/cdk/drag-drop';

And add it in the imports list.

imports: [
    ...
    DragDropModule
  ]

Using Angular Drag and Drop features

We are now ready to start using the drag and drop functionality. Lets start by adding a simple black box to a component. I’m going to use the default AppComponent, but you can do it in any component you like.

<div cdkDrag style="width: 100px; height: 100px; background-color: #000;"></div>

Notice the cdkDrag attribute on the div element. This essentially all we need to enable dragging for the div. Let run the Angular project and test it out:

ng serve --open

You should now see something like this:

Pretty cool right?
But just dragging the element is not really that useful on its own. A common use case is for changing the order of lists, so let’s set up a simple list to play with. First we will create an array in our component typescript file:

public numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Then we will show the list in our component html:

<div class="list" cdkDropList>
  <div class="list-element" *ngFor="let number of numbers" cdkDrag>
    {{ number }}
  </div>
</div>

Along with some simple styling

.list {
    width: 200px;
    border: 1px solid #000;
}

.list-element {
    width: 200px;
    height: 25px;
    background-color: #fff;
    border: 1px solid #000;
}

This will show a list where we can drag elements around. However if we drop the element somewhere in the list, it will jump back to its original position.

This is because the list is still rendering our original array. In order to render the element at its new position in the list, we need to modify our array when we drop the element. Let’s create a function in our TypeScript file to handle this.

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

...

public elementDropped(event: CdkDragDrop<number[]>): void
{
  moveItemInArray(this.numbers, event.previousIndex, event.currentIndex);
}

Now lets use the function in our list. In our HTML template, add the cdkDropListDropped output to the list.

<div class="list" cdkDropList (cdkDropListDropped)="elementDropped($event)">
  <div class="list-element" *ngFor="let number of numbers" cdkDrag>
    {{ number }}
  </div>
</div>

Now the list is changing the order, when we drop an element.