Overriding draggingTool.moveParts

GoJS
5

Meanwhile I developed a sample for you. I think the override of DraggingTool.computeEffectiveCollection can be simpler than that:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true,
            "draggingTool.computeEffectiveCollection": function(parts, options) {
              var all = new go.List();
              parts.each(function(p) {
                all.add(p);
                if (p.containingGroup !== null && !(p instanceof go.Link)) {
                  all.add(p.containingGroup);
                }
              });
              return go.DraggingTool.prototype.computeEffectiveCollection.call(this, all, options);
            }
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { width: 100, height: 100, resizable: true },
        $(go.Shape,
          { fill: "green" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        $(go.TextBlock,
          { font: "14pt sans-serif" },
          new go.Binding("text")),
        $(go.Placeholder),
        {
          layout: $(go.GridLayout, { wrappingColumn: 1, cellSize: new go.Size(1, 1), spacing: new go.Size(10, 10) })
        }
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: -1, text: "Group1", isGroup: true },
      { key: -2, text: "Group2", isGroup: true },
      { key: 1, text: "Alpha", group: -1 },
      { key: 2, text: "Beta", color: "orange", group: -1 },
      { key: 3, text: "Gamma", color: "lightgreen", group: -1 },
      { key: 4, text: "Delta", color: "pink", group: -2 },
      { key: 4, text: "Epsilon", color: "yellow", group: -2 }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>