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

28 Jan 202512 minutes to read

You can restrict dragging and dropping files to within folders only. This can be achieved by using the nodeDragStop and nodeDragging events of the TreeView.

ej.base.enableRipple(true);

// Hierarchical data source for TreeView control
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>
    <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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <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>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</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%;
}