How to restrict drag and drop for particular tree nodes in EJ2 TypeScript TreeView

4 Sep 202612 minutes to read

You can restrict dragging and dropping of nodes to within specific parent nodes (for example, folder-like parents) only. This can be achieved by using the nodeDragging and nodeDragStop events of the TreeView. The nodeDragging event fires while a node is being dragged and can be used to control which drop targets are valid, while the nodeDragStop event fires when the drop is about to occur and can be used to cancel the drop.

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

// Hierarchical data source for TreeView control
let hierarchicalData: { [key: string]: Object }[] = [
    {
        nodeId: '01', nodeText: 'Music', icon: 'folder',
        nodeChild: [
            { nodeId: '01-01', nodeText: 'Gouttes.mp3', icon: 'audio' }
        ]
    },
    {
        nodeId: '02', nodeText: 'Videos', icon: 'folder',
        nodeChild: [
            { nodeId: '02-01', nodeText: 'Naturals.mp4', icon: 'video' },
            { nodeId: '02-02', nodeText: 'Wild.mpeg', icon: 'video' },
        ]
    },
    {
        nodeId: '03', nodeText: 'Documents', icon: 'folder',
        nodeChild: [
            { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },
            { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },
            { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },
            { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },
            { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },
        ]
    },
    {
        nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
        nodeChild: [
            {
                nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,
                nodeChild: [
                    { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/9.png' },
                    { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png' },
                ]
            },
            { nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },
            { nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },
        ]
    },
    {
        nodeId: '05', nodeText: 'Downloads', icon: 'folder',
        nodeChild: [
            { nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },
            { nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },
            { nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },
            { nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },
        ]
    },
];

// Render the TreeView with image icons
let treeObj: TreeView = new TreeView({
    fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
    sortOrder: 'Ascending',
    allowDragAndDrop: true,
    nodeDragStop: dragStop,
    nodeDragging: nodeDrag
});
treeObj.appendTo('#tree');

function nodeDrag(args: DragAndDropEventArgs): void {
    if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
        args.dropIndicator = 'e-no-drop';
    }
}

function dragStop(args: DragAndDropEventArgs): void {
    if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
        args.cancel = true;
    }
}
<!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/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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;
        }

        .e-treeview .e-list-img {
            width: 25px;
            height: 25px;
        }

        /* Loading sprite image for TreeView */
        .e-treeview .e-list-icon {
            background-repeat: no-repeat;
            background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
            height: 20px;
        }

        /* Specify the icon positions based upon class name */
        .e-treeview .e-list-icon.folder {
            background-position: -10px -552px;
        }

        .e-treeview .e-list-icon.docx {
            background-position: -10px -20px;
        }

        .e-treeview .e-list-icon.ppt {
            background-position: -10px -48px;
        }

        .e-treeview .e-list-icon.pdf {
            background-position: -10px -104px;
        }

        .e-treeview .e-list-icon.images {
            background-position: -10px -132px;
        }

        .e-treeview .e-list-icon.zip {
            background-position: -10px -188px;
        }

        .e-treeview .e-list-icon.audio {
            background-position: -10px -244px;
        }

        .e-treeview .e-list-icon.video {
            background-position: -10px -272px;
        }

        .e-treeview .e-list-icon.exe {
            background-position: -10px -412px;
        }
    </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%;
}