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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





146657 Aug 13,2019 05:11 AM UTC Aug 13,2019 11:14 AM UTC Angular - EJ 2 1
Tags: Treeview
Anjali Kumari
Asked On August 13, 2019 09:38 AM UTC


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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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); 
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. 
Ashokkumar B. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon