Restrict the drag and drop for particular tree nodes in EJ2 JavaScript Treeview control

2 May 202312 minutes to read
You can able to restrict to drag and drop files under folder only. These can be achieved by using ‘nodeDragStop’ and ‘nodeDragging’ event of TreeView.
index.js
index.html
ej.base.enableRipple(true);

    // Hierarchical data source for TreeView component
    var hierarchicalData = [
        {
            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
    var treeObj = new ej.navigations.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) {
   if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
      args.dropIndicator = 'e-no-drop';
    }
}

function dragStop(args) {
  if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
    args.cancel = true;
  }
}
<html lang="en"><head><script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head><body>﻿



    <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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>
    <style>
        .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>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>