Drag and drop in EJ2 TypeScript TreeView control

3 Mar 202516 minutes to read

The TreeView control allows you to drag and drop any node by setting allowDragAndDrop to true. Nodes can be dragged and dropped at all levels of the same TreeView.

The dragged nodes can be dropped at any level by indicator lines with line, plus/minus, and restrict icons. These icons represent the exact position where the node is to be dropped as a sibling or child.

The following table explains the usage of indicator icons:

Icons Description
Plus icon Indicates that the dragged node is to be added as a child of the target node.
Minus or restrict icon Indicates that the dragged node is not to be dropped at the hovered region.
In between icon Indicates that the dragged node is to be added as a sibling of the hovered region.

  • If you need to prevent dragging action for a particular node, the nodeDragStart event can be used, which is triggered when the node drag starts. If you need to prevent dropping action for a particular node, the nodeDragStop event can be used, which is triggered when the drag stops.

  • The nodeDragging event is triggered when the TreeView node is being dragged. You can customize the cloned element in this event.

  • The nodeDropped event is triggered when the TreeView node is successfully dropped on the target element.

In the following sample, the allowDragAndDrop property is enabled.

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

let productTeam: { [key: string]: Object }[] = [
    {
        id: 1, name: 'ASP.NET MVC Team', expanded: true,
        child: [
            { id: 2, pid: 1, name: 'Smith' },
            { id: 3, pid: 1, name: 'Johnson', isSelected: true },
            { id: 4, pid: 1, name: 'Anderson' },
        ]
    },
    {
        id: 5, name: 'Windows Team',
        child: [
            { id: 6, pid: 5, name: 'Clark' },
            { id: 7, pid: 5, name: 'Wright' },
            { id: 8, pid: 5, name: 'Lopez' },
        ]
    },
    {
        id: 9, name: 'Web Team',
        child: [
            { id: 11, pid: 9, name: 'Joshua' },
            { id: 12, pid: 9, name: 'Matthew' },
            { id: 13, pid: 9, name: 'David' },
        ]
    },
    {
        id: 14, name: 'Build Team',
        child: [
            { id: 15, pid: 14, name: 'Ryan' },
            { id: 16, pid: 14, name: 'Justin' },
            { id: 17, pid: 14, name: 'Robert' },
        ]
    },
    {
        id: 18, name: 'WPF Team',
        child: [
            { id: 19, pid: 18, name: 'Brown' },
            { id: 20, pid: 18, name: 'Johnson' },
            { id: 21, pid: 18, name: 'Miller' },
        ]
    }
];

let treeObj: TreeView = new TreeView({
    fields: { dataSource: productTeam, id: 'id', text: 'name', child: 'child', selected: 'isSelected' },
    allowDragAndDrop: true,
});
treeObj.appendTo('#tree');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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='treeparent'>
            <div id="tree"></div>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </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%;
}

Multiple-node drag and drop

To drag and drop more than one node, you should enable the allowMultiSelection property along with the allowDragAndDrop property.

To perform multi-selection, press and hold the CTRL key and click the desired nodes. To select a range of nodes, press and hold the SHIFT key and click the nodes.

In the following sample, the allowMultiSelection property is enabled along with the allowDragAndDrop property.

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

let productTeam: { [key: string]: Object }[] = [
    {
        id: 1, name: 'ASP.NET MVC Team', expanded: true,
        child: [
            { id: 2, pid: 1, name: 'Smith' },
            { id: 3, pid: 1, name: 'Johnson', isSelected: true },
            { id: 4, pid: 1, name: 'Anderson', isSelected: true },
        ]
    },
    {
        id: 5, name: 'Windows Team',
        child: [
            { id: 6, pid: 5, name: 'Clark' },
            { id: 7, pid: 5, name: 'Wright' },
            { id: 8, pid: 5, name: 'Lopez' },
        ]
    },
    {
        id: 9, name: 'Web Team',
        child: [
            { id: 11, pid: 9, name: 'Joshua' },
            { id: 12, pid: 9, name: 'Matthew' },
            { id: 13, pid: 9, name: 'David' },
        ]
    },
    {
        id: 14, name: 'Build Team',
        child: [
            { id: 15, pid: 14, name: 'Ryan' },
            { id: 16, pid: 14, name: 'Justin' },
            { id: 17, pid: 14, name: 'Robert' },
        ]
    },
    {
        id: 18, name: 'WPF Team',
        child: [
            { id: 19, pid: 18, name: 'Brown' },
            { id: 20, pid: 18, name: 'Johnson' },
            { id: 21, pid: 18, name: 'Miller' },
        ]
    }
];

let treeObj: TreeView = new TreeView({
    fields: { dataSource: productTeam, id: 'id', text: 'name', child: 'child', selected: 'isSelected' },
    allowDragAndDrop: true,
    allowMultiSelection: true,
});
treeObj.appendTo('#tree');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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='treeparent'>
            <div id="tree"></div>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </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%;
}

See Also