Search results

Restrict the drag-and-drop for particular tree nodes

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.

Source
Preview
index.ts
index.html
index.css
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.getElementsByClassName('folder').length === 0) args.dropIndicator = 'e-no-drop';
}

function dragStop(args: DragAndDropEventArgs): void {
    if (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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</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%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}