How to perform drag and drop operation in layout of React Diagram?

This article explains how to perform drag-and-drop operations in the layout of React Diagram. In the React Diagram feature tour, you can automatically arrange the nodes and connectors using the layout features. In the layout sample, you can drag and drop a node onto another node. Please refer to the following code example to learn how to set up 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 every node renders, the node defaults callback method gets triggered. In the node defaults method, set the node constraints to AllowDrop. So, for every node, the constraint is set to AllowDrop.

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

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

Using the drop event, you can drag and drop a node to a different parent, establishing a parent-child relationship between them. When you drag a node and hover the mouse over another node, a highlighter appears. Once the node is dropped, the drop event gets triggered. In that event, retrieve the dropped node from the element arguments. After retrieving the node, obtain the connector connected to the diagram using the getEdges public method. Then, update the source ID of the connector and call the doLayout() method. The layout rearranges, and the dropped node is positioned as a child of the hovered node. Please refer to the following code example and sample.

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

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to perform drag-and-drop operations in the layout of the React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking features representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React 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 explore 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, BoldDesk Support or feedback portal. We are always happy to assist you!