Drag and drop list items in Angular ListView component

12 Sep 20255 minutes to read

The ListView component can be enhanced with drag and drop functionality by utilizing the TreeView component while maintaining a ListView appearance.

First, import the required TreeView module:

import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';

Enable drag and drop functionality in TreeView by setting the allowDragAndDrop property to true:

<ejs-treeview id='element' [fields]='fields' allowDragAndDrop='true'></ejs-treeview>

The TreeView component displays data in a hierarchical structure. To maintain a flat list appearance, prevent nested dropping by handling the nodeDragStop and nodeDragging events:

<ejs-treeview id='element' [fields]='fields' allowDragAndDrop='true' (nodeDragging)='onDragStop($event)' (nodeDragStop)='onDragStop($event)'></ejs-treeview>

fields= { dataSource: this.data, id: 'id', text: 'text' },

onDragStop(args: any) {
    // Prevent nested drop operations
   const draggingItem = document.getElementsByClassName("e-drop-in");
    if (draggingItem.length == 1) {
        draggingItem[0].classList.add('e-no-drop');
        args.cancel = true;
    }
}

The following example demonstrates draggable list items implementation:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';

@Component({
    imports: [
        TreeViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
          <div id="sample">
    <ejs-treeview id='element' [fields]='fields' allowDragAndDrop='true' (nodeDragging)='onDragStop($event)' (nodeDragStop)='onDragStop($event)'></ejs-treeview>
   </div>
        `,
})

export class AppComponent {
    public data = [
        { text: 'Hennessey Venom', id: 'list-01' },
        { text: 'Bugatti Chiron', id: 'list-02' },
        { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
        { text: 'SSC Ultimate Aero', id: 'list-04' },
        { text: 'Koenigsegg CCR', id: 'list-05' },
        { text: 'McLaren F1', id: 'list-06' },
        { text: 'Aston Martin One- 77', id: 'list-07' },
        { text: 'Jaguar XJ220', id: 'list-08' },
        { text: 'McLaren P1', id: 'list-09' },
        { text: 'Ferrari LaFerrari', id: 'list-10' },
    ];
    public fields = { dataSource: this.data, id: 'id', text: 'text' };
    onDragStop(args: any) {
        //Block the Child Drop operation in TreeView
        let draggingItem = document.getElementsByClassName("e-drop-in");
        if (draggingItem.length == 1) {
            draggingItem[0].classList.add('e-no-drop');
            args.cancel = true;
        }
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';


#sample {
    display: block;
    max-width: 280px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#element.e-treeview .e-ul {
    padding: 0;
}

#element.e-treeview .e-list-item {
    padding: 0 16px;
}

#element.e-treeview .e-text-content {
    padding: 0;
}

#element.e-treeview .e-fullrow {
    height: 36px;
}

#element.e-treeview .e-list-text {
    line-height: 34px;
}

#element.e-treeview .e-list-item:last-child {
    margin-bottom: 9px;
}

#element.e-treeview .e-list-item:first-child {
    margin-top: 9px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));