Drag to Group

Description

Drag nodes or groups into containers, build nested hierarchies, and manage dynamic parent-child structures in Angular with Foblex Flow. Use this pattern when your editor needs more than a flat canvas and grouping should feel like a first-class interaction.

Example

What this example shows

• Move nodes or groups into another group and update parent-child relations through drag-and-drop.
• Nest groups inside groups and nodes inside other containers when the editor needs hierarchy.
• Create new nodes directly inside a target container via fExternalItem.
• Control container geometry with fIncludePadding, fAutoSizeToFitChildren, and fAutoExpandOnChildHit.
• React to reorganization events through fDropToGroup and fCreateNode.

Practical tips

• Use fDropToGroup when your app needs to validate or persist hierarchy changes.
• Combine external palettes with fCreateNode if users should spawn nodes directly inside any container.
• Enable auto-expand when manual group resizing would slow down editing.
• Nesting can go deep, but groups inside nodes are still not supported.