How to perform drag and drop operation in OrgChart Angular Diagram?

In the Orgchart sample, one can create a parent/child relationship by dragging and dropping a node onto another node using the drop event in Angular Diagram.
Additionally, the AllowDrop constraints need to be enabled to display a highlighter when dragging the node and hovering the mouse over another node.

Please refer to the provided code example for more information.

<ejs-diagram #diagram id="diagram" width="100%" height="100%"  [contextMenuSettings]  ='contextMenuSettings'
      [nodes]="nodes" [connectors]="connectors" [getConnectorDefaults]='getConnectorDefaults' (drop)="drop($event)" [layout]='layout' [dataSourceSettings]='data'
      [getNodeDefaults]='getNodeDefaults' (created)="created()">
</ejs-diagram>

public drop(args): void {
   setTimeout(() => {

       var connector: ConnectorModel= {};
       if (args.element && args.target) {
           if (args.element) {
               //get an connector object 
               connector = this.diagram.getObject(args.element.inEdges[0]);
           }
           // this block executed when we drag any node in diagram and drop it onto the another node
           if (connector) {
               //update connector source and target id 
               connector.sourceID = args.target.id;
               connector.targetID = args.element.id;
               this.diagram.dataBind();
           } else {
               // this block executed when we drag  node in palette and drop it onto the node in diagram
               if (args.target.id !== args.element.id) {
                   this.diagram.add({ id: 'connector' + randomId(), sourceID: args.target.id, targetID: args.element.id });
               }
           }

           //To update an layout 
           this.diagram.doLayout();
       }
   }, 100);
   this.diagram.fitToPage();
}

The following sample illustrate the working of the how drag and drop in OrgChart works

Sample
Conclusion
Hope you enjoyed learning about how to perform drag and drop operation in OrgChart Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular 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 Angular Diagram and other Angular components.

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!