How to drag and drop node in a Layout in Blazor Diagram?

In a Blazor Diagram, You can establish parent-child relationships dynamically at runtime by dragging and dropping nodes onto another node. This is achieved by using the DragDrop event to connect nodes dynamically. Enabling the AllowDrop constraint is crucial, as it allows nodes to accept drop operations.

To learn more about node constraints, refer to the following link:

https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints

Refer to the following code example to establish parent-child relationships for runtime changes in the drop event.

Code Snippet:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" @ref="diagram" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating" DragDrop="OnDrop">
   <DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
   <SnapSettings>
       <HorizontalGridLines LineColor="white" LineDashArray="2,2">
       </HorizontalGridLines>
       <VerticalGridLines LineColor="white" LineDashArray="2,2">
       </VerticalGridLines>
   </SnapSettings>
   <Layout Type="LayoutType.OrganizationalChart" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
   </Layout>
</SfDiagramComponent>

@code
{
   int HorizontalSpacing = 40;
   int VerticalSpacing = 50;
   SfDiagramComponent diagram;
   
   //Event handler for creating nodes.
   private void OnNodeCreating(IDiagramObject obj)
   {
       Node node = obj as Node;
       node.Height = 50;
       node.Width = 150;
       node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" };
       node.Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
   }
   
    // Event handler for drag and drop operation.
   private void OnDrop(DropEventArgs args)
   {
       if (args.Element is DiagramSelectionSettings && args.Target is Node)
       {
           Node draggingNode = (args.Element as DiagramSelectionSettings).Nodes[0] as Node;
           Node targetNode = args.Target as Node;
           Connector connector = new Connector()
               {
                   SourceID = targetNode.ID,
                   TargetID = draggingNode.ID,
               };
           diagram.Connectors.Add(connector);
           diagram.DoLayout();
       }
   }

       //Event handler for creating connectors.
       private void OnConnectorCreating(IDiagramObject connector)
       {
           Connector connectors = connector as Connector;
           connectors.Type = ConnectorSegmentType.Orthogonal;
           connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 };
           connectors.TargetDecorator = new DecoratorSettings
           {
               Shape = DecoratorShape.None,
               Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", }
           };
       }

   public class OrgChartDataModel
   {
       public string Id { get; set; }
       public string Team { get; set; }
       public string Role { get; set; }
   }
   // Data source for the diagram.
   public object DataSource = new List<object>()
   {
       new OrgChartDataModel() { Id= "1", Role= "General Manager" },
       new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager" },
       new OrgChartDataModel() { Id= "3", Role= "Design Manager"},
       new OrgChartDataModel() { Id= "4", Role= "Operation Manager" },
       new OrgChartDataModel() { Id= "5", Role= "Marketing Manager" },
       new OrgChartDataModel() { Id= "6", Role= "Team Member1" },
   };
} 

Refer to the gif below:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to drag and drop nodes in a layout in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions 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!