Category / Section
How to clone the tree nodes in TreeView?
1 min read
In our TreeView component, the drag-and-drop functionality mainly works based on cutting the dragged node from source location and moving it to the destination location. But, in most of the areas, you will have to copy the dragged node from source and paste into the destination.
You can achieve this functionality using the nodeDragStop event of TreeView component. For more details, refer to the following code sample.
JavaScript
function nodeDragStop(args){
//Get the dragged node
draggedNode = args.draggedElement[0];
//Get the dragged node position
position = args.position;
//Get the dropped node
dropElement = args.dropTarget.closest('li');
//Cancel the treeview normal functionlity
args.cancel = true;
//Call cloned node method
onDropped();
}
function onDropped() {
//Create the instance for Dropped TreeView
var treeObj = $("#treeViewDrop").data("ejTreeView");
//Based on dragged node details form the data
var nodeData = {id:draggedNode.id, name :draggedNode.name};
//Validate whether the node is dropped to Drop TreeView
if(dropElement.closest(".e-treeview-wrap")[0].classList.contains("dragTree")){
return;
}
//Cloned tree node
if (position == "Over") {
treeObj.addNode(nodeData, dropElement);
}
else {
var dropNode = dropElement[0];
if (position == "After") {
treeObj.insertAfter(nodeData, dropNode);
}
else {
treeObj.insertBefore(nodeData, dropNode);
}
}
}
