Change styling of node while dragging


I have a Border on my palette node onmouseover. This border is implemented with mouseEnter and mouseLeave functions. This is how my palette looks when I drag a node from it:

I want to reduce the opacity of the dragged node, and i also want the border to be dragged with it.

This is how i expect it to be:

How can i do this?

Also, i do not want that no-drop pointer while dragging. I want it to remain a normal mouse pointer. How can this be done?

Was what we suggested in Drag and drop of nodes inadequate in providing translucency for dragged nodes?

We’ll look into a better way of having the border appear in the dragged copy, as well as controlling the cursor. I hope you realize that the user is not allowed to drop there because that diagram (a Palette) is read-only. But it should be possible to set the cursor to be something else.

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

      // initialize main Diagram
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
            "undoManager.isEnabled": true
      myDiagram.findLayer("Tool").opacity = 0.5;

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
            mouseEnter: function(e, node) { node.findObject("BORDER").stroke = "green"; },
            mouseLeave: function(e, node) { node.findObject("BORDER").stroke = null; }
            { name: "BORDER", fill: "transparent", stroke: null, strokeWidth: 3 },
            new go.Binding("stroke", "layerName", function(l) { return (l === "Tool") ? "green" : null; }).ofObject()),
          $(go.Panel, "Vertical",
            $(go.Shape, "Triangle",
              { width: 50, height: 50, fill: "gray", strokeWidth: 0, portId:"" },
              new go.Binding("fill", "color")),
              { editable: true },
              new go.Binding("text").makeTwoWay())

      // initialize Palette
      myPalette =
        $(go.Palette, "myPaletteDiv",
            nodeTemplateMap: myDiagram.nodeTemplateMap,
            "draggingTool.doDragOver": function(pt, obj) {
              this.diagram.currentCursor = '';
      myPalette.findLayer("Tool").opacity = 0.5;

      // now add the initial contents of the Palette
      myPalette.model.nodeDataArray = [
        { text: "blue node", color: "blue" },
        { text: "orange node", color: "orange" }

      // initialize Overview
      myOverview =
        $(go.Overview, "myOverviewDiv",
            observed: myDiagram,
            contentAlignment: go.Spot.Center


    // save a model to and load a model from Json text, displayed below the Diagram
    function save() {
      var str = myDiagram.model.toJson();
      document.getElementById("mySavedModel").value = str;
    function load() {
      var str = document.getElementById("mySavedModel").value;
      myDiagram.model = go.Model.fromJson(str);
<body onload="init()">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: whitesmoke; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: lightgray; border: solid 1px black"></div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  <div id="buttons">
    <button id="loadModel" onclick="load()">Load</button>
    <button id="saveModel" onclick="save()">Save</button>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  "linkDataArray": [
{"from":1, "to":2}