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

In the Angular diagram, you can able to automatically arrange the nodes and connectors by using the layout features. In the layout sample, you can able to drag and drop the node to another node. Please refer to the following code example for how to set layout.

public layout: Object = {
 // type property of layout allows setting which type of layout you want to define in the diagram
    type: "OrganizationalChart",
  };

To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints to the nodes. When every node render, the node defaults call back method gets triggered. In the node defaults method set the node constraints to AllowDrop. So, for every node constraint is set to AllowDrop.

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

public nodeDefaults(obj: NodeModel): NodeModel {
//set node constraints as AllowDrop
    obj.constraints = NodeConstraints.Default | 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 certain node to a different parent that establish the parent-child relationship between them. When you drag the node and mouse hover on another node the highlighter shows. After the node gets dropped, the drop event gets triggered. In that event, get the dropped node from element arguments. After got 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. Now, the layout gets rearranges and dropped node arrange as a child to the hovered node. Please refer to the following code example and sample.

 
public drop(args: IDropEventArgs) {
//Argument element is used to get the dropped node.
    let node: NodeModel = (args.element as NodeModel);
//Gets the connector that connected to dropped node 
        let edges: string[] =  this.diagram.getEdges(node);
        let connector: ConnectorModel = this.diagram.getObject(edges[0]);
//Argument target is used to get the hovered node
        connector.sourceID = (args.target as NodeModel).id;
        this.diagram.dataBind();
// doLayout is used to rearrange the nodes and connectors in diagram
        this.diagram.doLayout();
  }

Sample:

https://stackblitz.com/edit/angular-d14xd9?file=app.component.ts