Dragging from html into group

Hi Guru,

I’m cannot manage to resolve a strange problem: I’ve build from HTML drag example an application that tries to drag a node from HTML into a group but when I use the FindAtPart method to get group key it return ALWAYS a null object…But when the node is already in the canvas and I move it to group the event mousedrop of the group fires and the node is associated… I wonder if the drop area of the group node is too smaller to be hit by the drop event (!)
Here’s the code for the drop event (it’s quite the same of the example):

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

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

          // 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');
		  var pnt=point.x.toFixed(2)+" "+point.y.toFixed(2)

		  var idP=	event.dataTransfer.getData('text/plain');
		  var dsP=	event.dataTransfer.getData('text/html');
		  var tyP=	event.dataTransfer.getData('text/text/uri-list');
		  var containerkey = undefined;
		  var node = myDiagram.findPartAt(point, false);
		  if (node instanceof go.Group) {
		    containerkey = node.data.key;
		  } else if (node instanceof go.Node) {
		    var group = node.containingGroup;
		    if (group !== null) containerkey = group.data.key;
[...] some code to add node

Here’s the dragged group:

pls help me…

When I tried it, it worked reliably for all kinds of situations. Until I zoomed out the page (not just the diagram), in which case the coordinates were wrong. That’s a bug with the sample, which we’ll fix later today.

So my question is: what is the zoom level of your page? If it’s not 100%, maybe that would explain the problem.

I can confirm that zoom level is 100%. But rarely it hits drop area… I don’t know if the shape of the dragged object can influence this behavior because when the zoom level is less than 100% (f.e. 80%) the “highlight” function fires correctly but with no hits, and when the z.l is 100% the “highlight” fires completely out of target still with no hits.
Take a look:

I dragged the PE700 node over the group but it still remains not associated.

…I learned that the mouseDrop event in the node group template fires only when you drag an object into a group that is already in the canvas, while the

drop event fires only when you drag an object outside the canvas, like in this case. But the allowed drop area of the group where begins? Is possible to enlarge that drop area?

Yes, that’s right – the GraphObject.mouseDrop event handler is called by DraggingTool drag-and-drops. HTML drag-and-drop is a completely independent mechanism that GoJS does not use.

We’re working on improving the sample.

By the way, I discovered that the shape (probably the length of the shape) of the html dragged object influences the hit area of the group. If I make the dragged object smaller, by using a div instead of a <a> tag and not a long string it works in the main cases. I hope it helps.

Try the slightly-modified code at:

It seems you’ve changed pixelratio compute… Do I have to reimport all js libraries or one specific?

It’s only a change to the sample.

A post was split to a new topic: Adding a node to a group doesn’t show in Group.memberParts