Drag and drop list items in EJ2 TypeScript ListView control

10 Mar 20258 minutes to read

The ListView control does not have native drag and drop support. However, you can achieve drag and drop functionality by using the TreeView control styled to appear like a ListView.

Drag and Drop in TreeView control was enabled by setting the allowDragAndDrop to true.

let treeViewInstance: TreeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'text' },
    allowDragAndDrop: true
});

The TreeView control displays hierarchical data in a tree-like structure. List items in the TreeView can be prevented from being dropped as children of another element by canceling the nodeDragStop and nodeDragging events:

let treeViewInstance: TreeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'text' },
    allowDragAndDrop: true,
    nodeDragging: onDragStop,
    nodeDragStop: onDragStop,
});

function onDragStop(args: DragAndDropEventArgs) {
    //Block the Child Drop operation in TreeView
   let  draggingItem: HTMLCollection = document.getElementsByClassName("e-drop-in");
    if (draggingItem.length == 1) {
        draggingItem[0].classList.add('e-no-drop');
        args.cancel = true;
    }
}

In the sample below, we have rendered draggable list items using the TreeView control with ListView appearance.

index.ts
index.html
index.css
import { TreeView, DragAndDropEventArgs } from '@syncfusion/ej2-navigations';

let data: { [key: string]: Object }[] = [
    { 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' },
];
let treeViewInstance: TreeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'text' },
    allowDragAndDrop: true,
    nodeDragging: onDragStop,
    nodeDragStop: onDragStop

});

treeViewInstance.appendTo('#element');

function onDragStop(args: DragAndDropEventArgs) {
    //Block the Child Drop operation in TreeView
    let draggingItem: HTMLCollection = document.getElementsByClassName("e-drop-in");
    if (draggingItem.length == 1) {
        draggingItem[0].classList.add('e-no-drop');
        args.cancel = true;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    <style>
        #container {
            display: block;
            max-width: 280px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }

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

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

        #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;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#container {
    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;
}