We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

drag-and-drop system should support copy behavior as well as move behavior

Hi,

In treeview structure, I want to drag the same item repeatedly to multiple drop zones. In other words, the drag-and-drop system should support copy behavior as well as move behavior and after copying the data from one treeview to another, I want to save all the data. Could you please suggest me some exmple according to that.
Something like this example: https://stackblitz.com/edit/angular-ymlmql (bt need it in treeview structure)
If possible like this in Angular: https://jsplayground.syncfusion.com/nglebdpf




1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team August 13, 2019 11:14 AM UTC

Hi Anjali Kumari, 
 
Good day to you. 
 
We have prepared a custom sample based on your requirement. In the sample, we have considered both the copy and move behavior. You can achieve this behavior in the nodeDragStop event of Treeview using the following code snippet. 
 
public onDragStop(args: any): void { 
 
            // Checks whether the target is treeview2 
 
            let targetEle: any = closest(args.target, '.e-droppable'); 
 
            targetEle = targetEle ? targetEle : args.target; 
 
            if(targetEle.id == "tree2") { 
 
                args.cancel = true 
 
                var data = [{ 'id': args.draggedNodeData.id, 'name': args.draggedNodeData.text }] 
 
                // Add collection of node to treeview2 
 
                var treeObj = this.tree; 
 
                treeObj.addNodes(data, args.droppedNode); 
 
                console.log(treeObj.getTreeData()); 
 
            } 
 
        } 
 
In the above code, you can copy and paste the nodes from treeview1 to treeview2. But other cases, you can able to perform move and paste operation. 
 
Also, after performing drag and drop operations, you can get the updated source using getTreeData method of the Treeview. 
 
 
Please check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon