Drag and drop in React Treeview component

29 Aug 202324 minutes to read

The TreeView component allows you to drag and drop any node by setting allowDragAndDrop  to true. Nodes can be dragged and dropped at all levels of the same TreeView.

The dragged nodes can be dropped at any level by indicator lines with plus, minus/restrict, and in between icons. It represents the exact position where the node is to be dropped as sibling or child.

The following table explains the usage of indicator icons.

Icons Description
Plus icon Indicates that the dragged node is to be added as child of target node.
Minus or restrict icon Indicates that the dragged node is not to be dropped at the hovered region.
In between icon Indicates that the dragged node is to be added as siblings of hovered region.

  • If you need to prevent dragging action for a particular node, the nodeDragStart event can be used which is triggered when the node drag is started. If you need to prevent dropping action for a particular node, the nodeDragStop event can be used which is triggered when the drag is stopped.

  • The nodeDragging event is triggered when the TreeView node is being dragged. You can customize the cloned element in this event.

  • The nodeDropped event is triggered when the TreeView node is dropped on the target element successfully.

In the following sample, the allowDragAndDrop property is enabled.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
function App() {
    // define the JSON of data
    let productTeam = [
        {
            id: 1, name: 'ASP.NET MVC Team', expanded: true,
            child: [
                { id: 2, pid: 1, name: 'Smith' },
                { id: 3, pid: 1, name: 'Johnson', isSelected: true },
                { id: 4, pid: 1, name: 'Anderson' },
            ]
        },
        {
            id: 5, name: 'Windows Team',
            child: [
                { id: 6, pid: 5, name: 'Clark' },
                { id: 7, pid: 5, name: 'Wright' },
                { id: 8, pid: 5, name: 'Lopez' },
            ]
        },
        {
            id: 9, name: 'Web Team',
            child: [
                { id: 11, pid: 9, name: 'Joshua' },
                { id: 12, pid: 9, name: 'Matthew' },
                { id: 13, pid: 9, name: 'David' },
            ]
        },
        {
            id: 14, name: 'Build Team',
            child: [
                { id: 15, pid: 14, name: 'Ryan' },
                { id: 16, pid: 14, name: 'Justin' },
                { id: 17, pid: 14, name: 'Robert' },
            ]
        },
        {
            id: 18, name: 'WPF Team',
            child: [
                { id: 19, pid: 18, name: 'Brown' },
                { id: 20, pid: 18, name: 'Johnson' },
                { id: 21, pid: 18, name: 'Miller' },
            ]
        }
    ];
    // maps the appropriate column to fields property
    let fields = { dataSource: productTeam, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
    let allowDragAndDrop = true;
    return (
    // specifies the tag for render the TreeView component
    <TreeViewComponent fields={fields} allowDragAndDrop={allowDragAndDrop}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';

function App() {

    // define the JSON of data
  let productTeam: { [key: string]: Object }[] = [
            {
            id: 1, name: 'ASP.NET MVC Team', expanded: true,
            child: [
                { id: 2, pid: 1, name: 'Smith' },
                { id: 3, pid: 1, name: 'Johnson', isSelected: true },
                { id: 4, pid: 1, name: 'Anderson' },
            ]
        },
        {
            id: 5, name: 'Windows Team',
            child: [
                { id: 6, pid: 5, name: 'Clark' },
                { id: 7, pid: 5, name: 'Wright' },
                { id: 8, pid: 5, name: 'Lopez' },
            ]
        },
        {
            id: 9, name: 'Web Team',
            child: [
                { id: 11, pid: 9, name: 'Joshua' },
                { id: 12, pid: 9, name: 'Matthew' },
                { id: 13, pid: 9, name: 'David' },
            ]
        },
        {
            id: 14, name: 'Build Team',
            child: [
                { id: 15, pid: 14, name: 'Ryan' },
                { id: 16, pid: 14, name: 'Justin' },
                { id: 17, pid: 14, name: 'Robert' },
            ]
        },
        {
            id: 18, name: 'WPF Team',
            child: [
                { id: 19, pid: 18, name: 'Brown' },
                { id: 20, pid: 18, name: 'Johnson' },
                { id: 21, pid: 18, name: 'Miller' },
            ]
        }
    ];
   // maps the appropriate column to fields property
    let fields: Object = { dataSource: productTeam, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
    let allowDragAndDrop : boolean = true;
    return (
        // specifies the tag for render the TreeView component
        <TreeViewComponent fields={fields} allowDragAndDrop={ allowDragAndDrop }/>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Multiple-node drag and drop

To drag and drop more than one node, you should enable the allowMultiSelection property along with the allowDragAndDrop property.

To perform multi-selection, press and hold CTRL key and click the desired nodes. To select range of nodes, press and hold the SHIFT key and click the nodes.

In the following sample, the allowMultiSelection property is enabled along with the allowDragAndDrop property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
function App() {
    // define the JSON of data
    let productTeam = [
        {
            id: 1, name: 'ASP.NET MVC Team', expanded: true,
            child: [
                { id: 2, pid: 1, name: 'Smith', isSelected: true },
                { id: 3, pid: 1, name: 'Johnson', isSelected: true },
                { id: 4, pid: 1, name: 'Anderson' },
            ]
        },
        {
            id: 5, name: 'Windows Team',
            child: [
                { id: 6, pid: 5, name: 'Clark' },
                { id: 7, pid: 5, name: 'Wright' },
                { id: 8, pid: 5, name: 'Lopez' },
            ]
        },
        {
            id: 9, name: 'Web Team',
            child: [
                { id: 11, pid: 9, name: 'Joshua' },
                { id: 12, pid: 9, name: 'Matthew' },
                { id: 13, pid: 9, name: 'David' },
            ]
        },
        {
            id: 14, name: 'Build Team',
            child: [
                { id: 15, pid: 14, name: 'Ryan' },
                { id: 16, pid: 14, name: 'Justin' },
                { id: 17, pid: 14, name: 'Robert' },
            ]
        },
        {
            id: 18, name: 'WPF Team',
            child: [
                { id: 19, pid: 18, name: 'Brown' },
                { id: 20, pid: 18, name: 'Johnson' },
                { id: 21, pid: 18, name: 'Miller' },
            ]
        }
    ];
    // maps the appropriate column to fields property
    let fields = { dataSource: productTeam, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
    let allowDragAndDrop = true;
    let allowMultiSelection = true;
    return (
    // specifies the tag for render the TreeView component
    <TreeViewComponent fields={fields} allowMultiSelection={allowMultiSelection} allowDragAndDrop={allowDragAndDrop}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';

function App() {

    // define the JSON of data
 let productTeam: { [key: string]: Object }[] = [
            {
            id: 1, name: 'ASP.NET MVC Team', expanded: true,
            child: [
                { id: 2, pid: 1, name: 'Smith', isSelected: true  },
                { id: 3, pid: 1, name: 'Johnson', isSelected: true },
                { id: 4, pid: 1, name: 'Anderson' },
            ]
        },
        {
            id: 5, name: 'Windows Team',
            child: [
                { id: 6, pid: 5, name: 'Clark' },
                { id: 7, pid: 5, name: 'Wright' },
                { id: 8, pid: 5, name: 'Lopez' },
            ]
        },
        {
            id: 9, name: 'Web Team',
            child: [
                { id: 11, pid: 9, name: 'Joshua' },
                { id: 12, pid: 9, name: 'Matthew' },
                { id: 13, pid: 9, name: 'David' },
            ]
        },
        {
            id: 14, name: 'Build Team',
            child: [
                { id: 15, pid: 14, name: 'Ryan' },
                { id: 16, pid: 14, name: 'Justin' },
                { id: 17, pid: 14, name: 'Robert' },
            ]
        },
        {
            id: 18, name: 'WPF Team',
            child: [
                { id: 19, pid: 18, name: 'Brown' },
                { id: 20, pid: 18, name: 'Johnson' },
                { id: 21, pid: 18, name: 'Miller' },
            ]
        }
    ];
   // maps the appropriate column to fields property
    let fields: Object = { dataSource: productTeam, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
    let allowDragAndDrop : boolean = true;
    let allowMultiSelection : boolean = true;
    return (
        // specifies the tag for render the TreeView component
        <TreeViewComponent fields={fields} allowMultiSelection={ allowMultiSelection } allowDragAndDrop={ allowDragAndDrop } />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

You can also explore our React Tree View Drag and Drop example that shows how to render the Drag and Drop feature in React TreeView.

See Also