How to drag and drop tree nodes in React TreeView?
The React TreeView is a graphical user interface component that allows you to represent hierarchical data in a tree structure.
Drag and Drop
The React TreeView component has in-built drag-and-drop feature. It allows users to drag any node and drop it on any other node in the same or different tree using the allowDragAndDrop property. Additionally, React TreeView supports to drag a tree node to an external container using the nodeDragStop event of the React TreeView.
REACT
Inside the tree
export class Dragdrop extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.id = 1;
// Render the first TreeView by mapping its fields property with data source properties.
this.field = { dataSource: this.data.dragData1, id: 'id', text: 'name', child: 'child' };
this.allowDragAndDrop = true;
}
render() {
return (
<h4>TreeView-1</h4>
<div className="content">
<TreeViewComponent id='tree1' fields={'this.field'} allowDragAndDrop={'this.allowDragAndDrop'}/>
</div>
);
}
Outside the tree
export class Dragdrop extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.id = 1;
// Render the first TreeView by mapping its fields property with data source properties.
this.field = { dataSource: this.data.dragData1, id: 'id', text: 'name', child: 'child' };
this.allowDragAndDrop = true;
// Render the second TreeView by mapping its fields property with data source properties.
this.fields = { dataSource: this.data.dragData2, id: 'id', text: 'name', child: 'child', selected: 'isSelected' };
this.allowDragAndDrops = true;
}
render() {
return (
<h4>TreeView-1</h4>
<div className="content">
<TreeViewComponent id='tree1' fields={'this.field'} allowDragAndDrop={'this.allowDragAndDrop'}/>
</div>
<div className="col-lg-4 tree2-data">
<h4>TreeView-2</h4>
<div className="content">
<TreeViewComponent id='tree2' fields={'this.fields'} allowDragAndDrop={'this.allowDragAndDrops'}/>
</div>
</div>
)
}
Outside the external container
onDragStop(args) {
let targetEle = closest(args.target, '.e-droppable');
targetEle = targetEle ? targetEle : args.target;
// Check the target as ListView or not.
if (targetEle && targetEle.classList.contains('custom-list')) {
args.cancel = true;
let newData = [];
if (args.draggedNode.classList.contains('e-active')) {
var dragNode = closest(args.draggedNode, '.e-treeview');
var selNodes = dragNode.ej2_instances[0].selectedNodes;
for (let i = 0, len = selNodes.length; i < len; i++) {
let nodeEle = document.querySelector('[data-uid="' + selNodes[i] + '"]').querySelector('.e-list-text');
let nodeText = nodeEle.textContent;
let newNode = { id: 'l' + this.id, text: nodeText, class: 'custom-delete', iconId: 'i' + this.id };
this.id++;
newData.push(newNode);
}
}
else {
let text = 'text';
let nodeText = args.draggedNodeData[text];
let newNode = { id: 'l' + this.id, text: nodeText, class: 'custom-delete', iconId: 'i' + this.id };
this.id++;
newData.push(newNode);
}
// Add a collection of nodes to ListView.
this.listObj.addItem(newData, undefined);
}
}
// Add custom action for delete icon in ListView.
onCreate() {
document.getElementById('list').addEventListener('mousedown', (event) => {
if (event.target.classList.contains('custom-delete')) {
let node = closest(event.target, 'li');
this.listObj.removeItem(node);
}
});
Sample: https://stackblitz.com/edit/react-smsdal-ktafhn?file=index.js
FT: https://www.syncfusion.com/react-ui-components/react-treeview
Documentation: https://ej2.syncfusion.com/react/documentation/treeview/drag-and-drop/
Conclusion
I hope you enjoyed learning on how to drag and drop tree nodes in React TreeView.
You can refer to
our React Treeview feature tour page
to know about its other groundbreaking feature
representations and documentation, and how
to quickly get started for configuration specifications. You can also
explore our React Treeview Example to
understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
