How to drag and drop tree nodes in React TreeView?
This article explains 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 an 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, the React TreeView supports dragging 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);
}
});
Refer to the working sample for additional details and implementation: Sample
FT: https://www.syncfusion.com/react-components/react-tree-view
Documentation: https://ej2.syncfusion.com/react/documentation/treeview/drag-and-drop/
Conclusion
We 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 learn 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, BoldDesk Support, or feedback portal. We are always happy to assist you!
