Validation from palette to diagram

Hi, I have a problem checking the groups by adding a node from a palette, it works if I drag it from the diagram, but when I drag it from the palette it marks all the groups in green although I can only enter 1 group, I need to mark the group in green which can be accessed by dragging from the palette.
I used a mixture of these two examples.


In my test program, I do not seem to have that problem:

<!DOCTYPE html>
<title>Dropping into Groups</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
  // control the overall behavior when dragging-over or dropping onto the diagram background
  var AllowTopLevelDrops = true;

  function init() {
    var $ = go.GraphObject.make;

    // Initialize the main Diagram

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
          // what to do when a drag-over occurs in the Diagram's background
          mouseDragOver: function(e) {
            if (AllowTopLevelDrops) {
              myDiagram.currentCursor = "";
            } else {
              myDiagram.currentCursor = "not-allowed";

          // what to do when a drag-drop occurs in the Diagram's background
          mouseDrop: function(e) {
            if (AllowTopLevelDrops) {
              // when the selection is dropped in the diagram's background,
              // make sure the selected Parts no longer belong to any Group
              var ok = myDiagram.commandHandler.addTopLevelParts(myDiagram.selection, true);
              if (!ok) myDiagram.currentTool.doCancel();
            } else {

          // decide what kinds of Parts can be added to a Group or to top-level
          "commandHandler.memberValidation": function(grp, node) {
            if (grp === null) return AllowTopLevelDrops;  // maybe allow dropping Nodes in diagram's background
            if (node instanceof go.Group) return false;  // cannot add Groups to Groups
            return ===;  // only OK if node's color matches the group's color

          "undoManager.isEnabled": true

    myDiagram.nodeTemplate =
      $("Node", "Auto",
        { locationSpot: go.Spot.Center },
        // mouseDragEnter, mouseDragLeave, and mouseDrop handled by the group template
        // because Group.handlesDragDropForMembers is true
        $("Shape", "RoundedRectangle",
          { fill: "white" },
          new go.Binding("fill", "color")),
          { margin: 4 },  // make some extra space for the shape around the text
          new go.Binding("text", "key")));  // the label shows the node data's key

    var groupFill = "rgba(128,128,128,0.2)";
    var dropFill = "magenta";

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
          handlesDragDropForMembers: true,  // don't need to define handlers on Nodes and Links
          computesBoundsAfterDrag: true,  // allow dragging out of a Group that uses a Placeholder
          selectionObjectName: "SHAPE"  // selection handle goes around shape, not label
        { // what to do when a drag-over or a drag-drop occurs on a Group
          mouseDragEnter: function(e, grp, prev) {
            if (grp.canAddMembers(grp.diagram.toolManager.draggingTool.draggingParts)) {
              var shape = grp.findObject("SHAPE");
              if (shape) shape.fill = dropFill;
              grp.diagram.currentCursor = "";
            } else {
              grp.diagram.currentCursor = "not-allowed";
          mouseDragLeave: function(e, grp, next) {
            var shape = grp.findObject("SHAPE");
            if (shape) shape.fill = groupFill;
            grp.diagram.currentCursor = "";
          mouseDrop: function(e, grp) {
            var ok = grp.addMembers(grp.diagram.selection, true);
            if (!ok) grp.diagram.currentTool.doCancel();
        $(go.Panel, go.Panel.Horizontal,
          { alignment: go.Spot.Left },
            { font: "bold 12pt sans-serif" },
            new go.Binding("text", "key"),
            new go.Binding("stroke", "color"))),
        $(go.Panel, "Auto",
          { name: "BODY" },
            { name: "SHAPE", fill: groupFill, stroke: "gray", strokeWidth: 3 },
            new go.Binding("stroke", "color")),
          $(go.Placeholder, { padding: 10, minSize: new go.Size(40, 40) })));

    myDiagram.model.nodeDataArray = [
      { key: "Green1", isGroup: true, color: "green" },
      { key: "Orange1", isGroup: true, color: "orange" },
      { key: "Green2", isGroup: true, color: "green" },
      { key: "Orange2", isGroup: true, color: "orange" }

    // initialize the Palette
    myPalette =
      $(go.Palette, "myPaletteDiv",
          "layout.wrappingColumn": 1,
          // share the templates with the main Diagram
          nodeTemplate: myDiagram.nodeTemplate,
          groupTemplate: myDiagram.groupTemplate

    myPalette.model.nodeDataArray = [
      { key: "g", color: "green" },
      { key: "b", color: "orange" },
      { key: "y", color: "yellow" }

  function toggleAllowTopLevelDrops() {
    AllowTopLevelDrops = !AllowTopLevelDrops;
<body onload="init()">
  <div style="width:100%; white-space:nowrap;">
    <span style="display: inline-block; vertical-align: top; padding: 5px; width:100px">
      <div id="myPaletteDiv" style="border: solid 1px black; height: 400px"></div>
    <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">
      <div id="myDiagramDiv" style="border: solid 1px black; height: 400px"></div>
  <label><input type="checkbox" onclick="toggleAllowTopLevelDrops()" checked="checked"/>Allow Top-Level Drops</label>
    The CommandHandler.memberValidation function only allows Nodes to be added to Groups of the same "color".
    The Group.mouseDrop event handler calls Group.addMembers to add dropped nodes to that group.
    If the add fails due the memberValidation predicate, the whole operation is cancelled and thus rolled-back.
    The "Allow Top-Level Drops" checkbox controls whether or not the user may drop nodes onto the background of the diagram.
    That applies to both external drag-and-drops, from the Palette, and internal drag-and-drops starting within the diagram.
    The Diagram.mouseDrop event handler is similar to the Group.mouseDrop event handler,
    except that it calls CommandHandler.addTopLevelParts.
    The Group.mouseDragEnter and Group.mouseDragLeave event handlers change the appearance of the group if it is OK
    to drop what the DraggingTool is dragging into that group.
    There is similar behavior for the diagram background for top-level drops, implemented by Diagram.mouseDragOver.

Perfect! Thank you very much, the error was that selected me only from the diagram.

 mouseDragEnter: ....
              if (grp.canAddMembers(grp.diagram.selection)) {

mouseDragEnter: …
if (grp.canAddMembers(grp.diagram.toolManager.draggingTool.draggingParts)) {