How to implement drag and drop lists in Angular 6 application?

Published by Shubham Srivastava on

I was looking for an easy solution to implement drag and drop lists for the fibotalk app that I was working on to give more control to users for charts filters and logs tables columns.

After looking for a long time I was not able to find a complete solution at a single place and had to take references from various sources as there was no solution particularly for Angular 6. Angular material provides an in-built drag and drop solution, but only from angular 9.

I found an npm package “ngx-drag-and-drop-lists” but it didn’t have any implementation examples that made the implementation easier. So I decided to write a full-fledge solution to the problem.

First of all, install the npm package using the command

npm i ngx-drag-and-drop-lists@1.2.5

Note- version 1.2.5 and below are stable for angular 6, greater versions might not be supported by Angular 6.

There might be some error while installing the package, looking like this.

Image for post

This error occurs when an npm package has a post-install script and it fails to execute or complete.

To overcome this issue you have to install the package by ignoring the post-install script.

npm install ngx-drag-and-drop-lists@1.2.5 — ignore-script

Now after your npm package is installed you are good to use it in your application.

Import the “DndListModule” inside your required module

import { DndListModule } from ‘ngx-drag-and-drop-lists’;

and add “DndListModule” in the imports array.

Drag and drop list work on the array data type. So let’s assume you have an array which is ngFor repeated and you want to implement drag and drop list to adjust the indexes of the elements present in that array.

To implement drag and drop list you have to include your ngFor repeated section inside a parent div to make that section draggable.

Image for post

This is just a basic structure of how the draggable section should look.

Now we have to provide DndList directives to this structure.

Image for post

Basic functioning HTML for drag and drop list.

[dndList] is used to make the particular div a draggable area where all the drag and drop operation will be supported.

[dndModel] is used to specify on which array variable drag and drop and index manipulation will be done.

[dndPlaceholder] is used to specify an id of an element that will act as a place holder when dragging is being done.

Notice that I have added an extra div just before the ng-repeated list and given it id “placeholder”. This div acts as a placeholder when dragging is being done. CSS for the div is given below.

Image for post

CSS for placeholder div.

[dndDraggable] is used to define which element will be draggable.

[dndObject] is used to define when an item is being dropped or dragged, what value will it store.

(dndMoved) is the output event that will be triggered when an element is dropped. We have to provide our array manipulation logic in that function.

Image for post

Array index manipulation logic in the .ts file.

This will rearrange the array and place the item at the index at which the item was dropped.

This is a basic example of how drag and drop lists can be implemented in an Angular 6 application. There can be various modifications that can be done both on the logical side and the UI side. Set your imagination horses free and enjoy this wonderful feature as we did in Fibotalk.

Leave a Reply

Your email address will not be published. Required fields are marked *