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. See the Groups Intro page for an explanation of GoJS Groups.

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 TextBlocks use the GraphObject.opacity property, which allows for the text to somewhat match the color of what it's on top of.

The slider controls how many nested levels of Groups are expanded.
Semantic zoom level: