Palette with absolute positioning cannot drop shapes onto diagram

GoJS
1

I am trying to implement a floating toolbar using a pallet from one of the examples. I can get everything to look ok, but the shapes will not drop onto the diagram. Are there any good examples of this?

2

I just tried this, and on the very first try it worked the way that I think you are expecting.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="https://unpkg.com/gojs"></script>
  <script>
    function init() {
      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { "undoManager.isEnabled": true });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape,
            {
              fill: "white", stroke: "gray", strokeWidth: 2,
              portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
            },
            new go.Binding("stroke", "color")),
          $(go.TextBlock,
            { margin: new go.Margin(5, 5, 3, 5) },
            new go.Binding("text"))
        );

      myDiagram.model = new go.GraphLinksModel([
        { key: 1, text: "Hello", color: "green" },
        { key: 2, text: "World!", color: "blue" }
      ], [
        { from: 1, to: 2 }
      ]);

      myPalette =
        $(go.Palette, "myPaletteDiv",
          {
            nodeTemplateMap: myDiagram.nodeTemplateMap,
            model: new go.GraphLinksModel([
              { text: "red node", color: "red" },
              { text: "green node", color: "green" },
              { text: "blue node", color: "blue" },
              { text: "orange node", color: "orange" }
            ])
          });
    }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="width: 100%; height: 400px; border: solid 1px black"></div>
  <div id="myPaletteDiv" style="position: absolute; left: 150px; top: 30px; width: 100px; height: 200px; background-color: floralwhite; border: solid 1px black"></div>
</body>
</html>

Perhaps you have a problem with the z-index CSS styling?

3

Looks like the order of the divs in the HTML might make a difference. I just swapped the order like in your example and it’s working. Glad you got it on the first try. Thanks for your help.