How to drag a node from palette and drop it into a group node in React Diagram?

This article explains how to drag a node from the palette and drop it into a group node in React Diagram.

To add the dropped node as a child to the existing group node in Syncfusion® React Diagram, we handle it in the collection change and drop events of the diagram. In these events, we get the bounds value for the dropped node and existing nodes, then compare the bounds values of the nodes. If the target node has children, we drop the node as a child to the group node.

In order to add the dropped node as a child to an existing group node, we utilize the collectionChange and drop events of the diagram. These events allow us to handle the process effectively. The collectionChange event is triggered whenever there is a change in the diagram’s nodes or connectors collection.

  collectionChange={(args) => {
   if (args.state === 'Changed') {
     dropElement(args);
   }
 }}
 drop={(args) => {
   if (args.source.nodes !== undefined) {
     dropElement(args);
   }
 }}

When a node or connector is dropped onto the diagram, the drop event is triggered. Within this event, we retrieve the bounds value, which includes the position and size, for both the dropped node and the potential group node that may serve as its parent.
Next, we compare the bounds value of the nodes to determine the appropriate course of action. Specifically, we check if the target node already has children. If it does, this indicates that it is a group node. In such a case, we proceed to add the dropped node as a child to the group node.

function dropElement(args) {
   let target;
   for (let i = 0; i < diagramInstance.nodes.length; i++) {
     let node = args.element;
     let r1 = node.wrapper.bounds;
     let r2 = diagramInstance.nodes[i].wrapper.bounds;
     if (
       !(
         r2.left >= r1.right ||
         r2.right <= r1.left ||
         r2.top >= r1.bottom ||
         r2.bottom <= r1.top
       )
     ) {
       if (diagramInstance.nodes[i].children !== undefined) {
         target= diagramInstance.nodes[i];
       }
     }
   }
   if (target && target.children !== undefined) {
     if (args.element.id !== target.id) {
       if (target.children.indexOf(args.element.id) === -1) {
         diagramInstance.addChild(target, args.element.id);
       }
     }
   }
 }

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

Conclusion

We hope you enjoyed learning about how to drag a node from the palette and drop it into a group node in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Spreadsheet and other components.

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