How to drag a node from 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 handled in collection Change and drop event of diagram. In this event, we get the bounds value for the dropped node and existing nodes, then we compare the bounds value of the nodes, if the target node has the children then drop the node as the child to 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);
       }
     }
   }
 }

Sample

Conclusion
I hope you enjoyed learning about how to drag a node from 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 comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!