1. Home
  2. Forum
  3. jQuery
  4. Drag and Drop multiple nodes

Drag and Drop multiple nodes

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?

1 Reply
SG Shyam G Syncfusion Team 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 


Loader.
Up arrow icon