Some new features

Question

Hi,I was wondering if we have some other features in the diagram.As shown in this video: https://www.screencast.com/t/qz8S0w2q71. When they drag and drop any item from left panel, on right side connectors are highlighted.2 Once they drop it. new node is created right near to last one.3. If they drop a new node between two others the connector is highlighted between and it is created between those nodes.

Shyam G · Answer

Hi Ahman, 





Query 

Response 


1. When they drag and drop any item from left panel, on right side connectors are highlighted. 
2 Once they drop it. new node is created right near to last one. 

We have enabled AllowDrop constraints for connector.  
When we drag a node from palette and drop it onto the connectors, the drop event gets triggered in which the dropped node will be added at the last of nodes collection. 

Please refer to playground link below. 
https://jsplayground.syncfusion.com/npt3sbsx 



3. If they drop a new node between two others the connector is highlighted between and it is created between those nodes. 

    We have enabled AllowDrop constraints for connector.  
    When we drag a node from palette and drop it onto the connectors which is connected between the nodes, the drop event gets triggered. 
    In this event, we add a dropped node in-between the two nodes and establish a connection between them. 

Please refer to playground link below. 
https://jsplayground.syncfusion.com/xwzeaptn 

drop event help documentation 
https://help.syncfusion.com/api/js/ejdiagram#events:drop 

AllowDropconstraints help documentation 

https://help.syncfusion.com/api/js/ejdiagram#members:connectors-constraints 


Regards, 
Shyam G

Query	Response
1. When they drag and drop any item from left panel, on right side connectors are highlighted. 2 Once they drop it. new node is created right near to last one.	We have enabled AllowDrop constraints for connector. When we drag a node from palette and drop it onto the connectors, the drop event gets triggered in which the dropped node will be added at the last of nodes collection. Please refer to playground link below. https://jsplayground.syncfusion.com/npt3sbsx
3. If they drop a new node between two others the connector is highlighted between and it is created between those nodes.	We have enabled AllowDrop constraints for connector. When we drag a node from palette and drop it onto the connectors which is connected between the nodes, the drop event gets triggered. In this event, we add a dropped node in-between the two nodes and establish a connection between them. Please refer to playground link below. https://jsplayground.syncfusion.com/xwzeaptn drop event help documentation https://help.syncfusion.com/api/js/ejdiagram#events:drop AllowDropconstraints help documentation https://help.syncfusion.com/api/js/ejdiagram#members:connectors-constraints