Restrict the drag-and-drop for particular tree nodes

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SampleBase } from './sample-base';
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
  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' }
      ]
    }
  ];
  fields: Object = {
    dataSource: this.hierarchicalData,
    id: 'nodeId',
    text: 'nodeText',
    child: 'nodeChild',
    iconCss: 'icon',
    imageUrl: 'image'
  };

  allowDragAndDrop: boolean = true;

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

  dragStop(args: DragAndDropEventArgs): void {
    if (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}
              sortOrder="Ascending"
              allowDragAndDrop={this.allowDragAndDrop}
              nodeDragStop={this.dragStop.bind(this) as any}
              nodeDragging={this.nodeDrag.bind(this) as any}
            />
          </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;
    }
    nodeDrag(args) {
        if (args.droppedNode.getElementsByClassName('folder').length === 0)
            args.dropIndicator = 'e-no-drop';
    }
    dragStop(args) {
        if (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} sortOrder="Ascending" allowDragAndDrop={this.allowDragAndDrop} nodeDragStop={this.dragStop.bind(this)} nodeDragging={this.nodeDrag.bind(this)}/>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));