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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Drag and Drop multiple nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

146775 Aug 19,2019 02:28 PM UTC Aug 20,2019 06:40 AM UTC jQuery 1
loading
Tags: ejDiagram
Chad Carey
Asked On August 19, 2019 02:28 PM UTC

How do you handle this in JS? When the diagram has an onDrop function assigned, it doesn't seem to include all the nodes you have selected when you drop them. Dragging to select multiple also fires off the onClick event but only for just one of the nodes and not any others. Is that normal? Do I need to add drop and click handlers to each node using the template or let the diagram universally handle them?

Just in case, how do you disable the dragging across multiple nodes to select them?

Shyam G [Syncfusion]
Replied On August 20, 2019 06:40 AM UTC

Hi Chad, 
 
Query 
Response 
How do you handle this in JS? When the diagram has an onDrop function assigned, it doesn't seem to include all the nodes you have selected when you drop them. Dragging to select multiple also fires off the onClick event but only for just one of the nodes and not any others. Is that normal? Do I need to add drop and click handlers to each node using the template or let the diagram universally handle them? 
Drop event: 
 
The drop event gets triggered only when we drag a node/connector from symbol palette and drop it onto the diagram component. Please refer to a code example below. 
 
Code example: 
 
$("#diagram").ejDiagram({  
               // define drop event 
                drop: function onDrop(args){ 
                   alert("drop") 
                },  
}); 
 
Help documentation:   
 
 
Click event: 
 
The click event triggers when you click on a node/connector/diagram area. 
 
Code example: 
 
 
$("#diagram").ejDiagram({   
               // define click event 
                click: function onClick(args){ 
                      alert("click") 
                }, 
}); 
 
 
Here is the sample for your reference 
 

Could you please share your exact scenario, so that we can provide a suitable events for it. 
 
Just in case, how do you disable the dragging across multiple nodes to select them? 
Could  you please confirm us whether you need to disable multiple selection on nodes? If yes, please set tool as SingleSelect to achieve your requirement. Please refer to a help documentation below. 
 
 
Please refer to above sample in which we have disabled multiple selection. 
 
If we misunderstood your requirement, please share us more details such as exact scenario with screenshot. 
 
 
Regards, 
Shyam G 


CONFIRMATION

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