This sample allows the user to drag nodes, including groups, into and out of groups, both from the Palette as well as from within the Diagram.

Highlighting to show feedback about potential addition to a group during a drag is implemented using GraphObject.mouseDragEnter and GraphObject.mouseDragLeave event handlers. Because Group.computesBoundsAfterDrag is true, the Group's Placeholder's bounds are not computed until the drop happens, so the group does not continuously expand as the user drags a member of a group.

When a drop occurs on a Group or a regular Node, the GraphObject.mouseDrop event handler adds the selection (the dragged Nodes) to the Group as new members.

The slider controls how many nested levels of Groups are expanded.

Semantic zoom level: