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.tsx
style.css
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;
}