How to perform drag and drop operation layout of Javascript Diagram?

In the Javascript Diagram feature tour, you can automatically arrange the nodes and connectors by using the layout features. In the layout sample, you can drag and drop a node to another node. Please refer to the following code example to see how to set the layout.

// Configures automatic layout
 layout: {
   type: 'OrganizationalChart',
 }, 

To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints for the nodes. When each node is rendered, the node defaults callback method gets triggered. In the node defaults method, set the node constraints to AllowDrop. Thus, the AllowDrop constraint is set for every node.

Please refer to the following code example for how to set node constraints in the node defaults method.

// Sets default value for Node.
function getNodeDefaults(obj) {
 obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop; // The BackgroundColor   
 //property of node used to set background color of node.
   obj.backgroundColor = (obj.data as EmployeeInfo).color;
   obj.style = { fill: "none", strokeColor: "none", color: "white" };
   obj.width = 120;
   obj.height = 30;
   return obj;
} 

By using the drop event, you can drag and drop a specific node to a different parent to establish a parent-child relationship between them. When you drag the node and hover the mouse over another node, a highlighter is shown. After the node is dropped, the drop event gets triggered. In that event, get the dropped node from the element arguments. After obtaining the node, get the connector connected to the diagram using the getEdges public method. Now, change the source ID of the connector and call the doLayout() method. The layout rearranges, and the dropped node is arranged as a child of the hovered node. Please refer to the following code example and sample.

drop: function (args) {
   let node = args.element;
   let edges = diagram.getEdges(node);
   let connector = diagram.getObject(edges[0]);
   connector.sourceID = args.target.id;
   diagram.dataBind();
   diagram.doLayout();
 }, 

Sample

Conclusion

I hope you enjoyed learning about how to perform the drag and drop operation in the layout of the Javascript Diagram.

You can refer to our Javascript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Javascript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!