div.addEventListener("drop", event => {
        // prevent default action
        // (open as link for some elements in some browsers)
        event.preventDefault();

        // Dragging onto a Diagram
        if (div === myDiagram.div) {
          var can = event.target;
          var pixelratio = myDiagram.computePixelRatio();

          // if the target is not the canvas, we may have trouble, so just quit:
          if (!(can instanceof HTMLCanvasElement)) return;

          var bbox = can.getBoundingClientRect();
          var bbw = bbox.width;
          if (bbw === 0) bbw = 0.001;
          var bbh = bbox.height;
          if (bbh === 0) bbh = 0.001;
          var mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw) - dragged.offsetX;
          var my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh) - dragged.offsetY;
          var point = myDiagram.transformViewToDoc(new go.Point(mx, my));
          myDiagram.startTransaction('new node');
          myDiagram.model.addNodeData({
            location: point,
            text: event.dataTransfer.getData('text'),
            color: "lightyellow"
          });
          myDiagram.commitTransaction('new node');

          // remove dragged element from its old location
          if (remove.checked) dragged.parentNode.removeChild(dragged);
        }

        // If we were using drag data, we could get it here, ie:
        // var data = event.dataTransfer.getData('text');
      }, false);

Am using HTML drag and drop , and dropping to Canvas (GOJS) Area. So far working fine , am able to drag elements from one component( giving draggable="true") to the elements and dropping to another component using onDrop function and onDragOver function , and once dropped , am constructing new nodes

Everything working as expected , i have 2 queries basically

1. I dont want to drag elements to overlap already existing nodes. Meaning whenever i am dragging and entering to drop area i can see green + sign and now I am able to drop to the already existing nodes (imagine already 3 nodes are there for some diagram) , so that it will overlap , some how i NEED to restrict and show X sign when it overlap already existing nodes and should NOT allow to drop on other nodes

2. When i dragged and dropped element , is there any way i can highlight node , giving impression its the newly added node.

I am taking reference from this url https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/htmlDragDrop.html

Can anyone help me with it