Restrict the drag-and-drop for particular tree nodes in React TreeView component

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent, DragAndDropEventArgs} from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

export default class App extends React.Component<{}, {}> {

// Hierarchical data source for TreeView component
public 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' },
            ]
        }
];
private fields: Object = { dataSource: this.hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };

private allowDragAndDrop: boolean = true;

private sortOrder: string = 'Ascending';

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

dragStop(args: DragAndDropEventArgs): void {
  if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
    args.cancel = true;
  }
}

  render() {
    return (
      <div className = 'control-pane'>
        <div className='control-section'>
        <div className='control_wrapper'>
            {/* Render TreeView */}
            <TreeViewComponent fields={this.fields} allowDragAndDrop={this.allowDragAndDrop} nodeDragStop={this.dragStop.bind(this)} nodeDragging={this.nodeDrag.bind(this)}/>
        </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

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

 #display {
     max-width: 500px;
     margin: auto;
     padding: 10px;
}

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // Hierarchical data source for TreeView component
        this.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' },
                ]
            }
        ];
        this.fields = { dataSource: this.hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };
        this.allowDragAndDrop = true;
        this.sortOrder = 'Ascending';
    }
    nodeDrag(args) {
        if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
            args.dropIndicator = 'e-no-drop';
        }
    }
    dragStop(args) {
        if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
            args.cancel = true;
        }
    }
    render() {
        return (<div className='control-pane'>
        <div className='control-section'>
        <div className='control_wrapper'>
            
            <TreeViewComponent fields={this.fields} allowDragAndDrop={this.allowDragAndDrop} nodeDragStop={this.dragStop.bind(this)} nodeDragging={this.nodeDrag.bind(this)}/>
        </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));