Even after placing element outside the group element is moving with group

If i am placing an element inside the group and later placing it outside that group, the group is still maintained in the model and on moving that group the element/Part is moving with it.
Also while resizing this group it is getting displaced from its original location.
Each time i try to resize while clicking on resizing adornment it is getting shifted a little downwards.

using following group template

    this.diagram.groupTemplate =
      $(go.Group, "Vertical",        
        { dragComputation: stayInFixedArea }, 
        $(go.Shape, "Rectangle",  // the rectangular shape around the members
          {
            name: "SHAPE",
            fill: groupFill,
            stroke: groupStroke,
            minSize: new go.Size(CellSize.width * 2, CellSize.height * 2)
          },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          new go.Binding("fill", "isHighlighted", function(h) { return h ? dropFill : groupFill; }).ofObject(),
          new go.Binding("stroke", "isHighlighted", function(h) { return h ? dropStroke : groupStroke; }).ofObject()), 
        {
          layerName: "BlockLayer",
          resizable: true, resizeObjectName: "SHAPE",
          // because the gridSnapCellSpot is Center, offset the Group's location
          locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),
          zOrder:1
        },
        // always save/load the point that is the top-left corner of the node, not the location
        new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        { // what to do when a drag-over or a drag-drop occurs on a Group
          mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
          mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
          mouseDrop: function(e, grp) {
            var ok = grp.addMembers(grp.diagram.selection, true);
            if (!ok) grp.diagram.currentTool.doCancel();
          }
        },
        $(go.TextBlock, 
          {editable:true, textAlign: 'right', alignment: go.Spot.BottomRight, verticalAlignment: go.Spot.Bottom},  
          new go.Binding("text", "key").makeTwoWay())
      );

      // decide what kinds of Parts can be added to a Group
    this.diagram.commandHandler.memberValidation = function(grp, node) {
      if (grp instanceof go.Group && node instanceof go.Group) return false;  // cannot add Groups to Groups
      // but dropping a Group onto the background is always OK
      return true;
    };

After placing it outside, the model still has the group and on moving element keeps moving with group

You should add a mouseDrop function to your diagram to remove a part dopped on the diagram background from any groups:

mouseDrop: function(e) {
  // when the selection is dropped in the diagram's background,
  // make sure the selected Parts no longer belong to any Group
  if (!e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true)) {
    e.diagram.currentTool.doCancel();
  }
}

Thanks, that worked and what about displacement issue when resizing?

Here is a ref, it is behaving here differently too not much like in my code but yes there is some problem with it.

https://codepen.io/anon/pen/agKpOa

That’s because you’ve set the locationSpot on your group to be offset, so your stayInFixedArea function ends up with an offset when calculating the limited location. I’m not sure what the offset is for, so you’ll need to figure out the best solution for your app.

Ok thanks, for the feedback it is working fine without that offset.