Dragdrop a html palette node to group object

GoJS
1

We are using Html palette instead of gojs palette control.We are tring to drag & drop a node to group object(BPMN swimlane).

How can we associate a node to group object? We did not handle drop event.

Can we capture drop event of this html element?

we looked your html and jquery samples. Can you make a sample for it?

P.S. : we integrated KnockoutJS to GoJs with no problem.

Thanks

2

Have you seen this example? HTML Drag and Drop, and external Clipboard pasting

3

Hi Walter,

Yes, we have seen this example. But it is not related to our problem.

We can drag&drop a html object to diagram, after the object added to diagram we can drag&drop and associate that object to group object with no problem.

But, if we try to drag&drop a new html object over to a group object directly, it does not associate to group object smoothly.

I am waiting your reply.
Thanks

4

I believe in the htmlDragDrop sample you could modify the “drop” event handler to automatically add the new Node(s) to the Group that is at the drop point, if there is such a Group at that point.

5

We solved it

Thanks

6

Hi,

Saw the example in HTML Drag and Drop, and external Clipboard pasting, but unable to figure out how to set the group when a html object is dropped onto a swimlane. Help required. Thanks

7

If you look at the code in that HTML Drag and Drop sample, do you see where you get a Point in document coordinates from the call to Diagram.transformViewToDoc?

You could call Diagram.findPartAt with that point to see if the user dropped onto an existing Node. If it finds a Group, you could set the new data object’s containing group key to that group’s key. If it finds a regular Node, you can see if the Node.containingGroup is non-null – if it is, you can use that group’s key.

    var point = myDiagram.transformViewToDoc(...);
    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;
    }
    myDiagram.startTransaction('new node');
    myDiagram.model.addNodeData({
      location: point,
      text: dragged.textContent,
      group: containerkey
    });
    myDiagram.commitTransaction('new node');
1 Like
8

Hi Walter,

Thanks for the quick reply.
I tried this solution, I get the group and add to the new node, but once I drop the html object, I am unable to see the dropped object on the swimlane though it is added to the diagram’s model. Any help much appreciated. Thanks

9

If you don’t set the group: containerkey in the new node data object, do you see the new node properly?

10

In both the case I don’t see the node on swimlane though it gets added to diagram’s model.

11

I just tried modifying the samples/htmlDragDrop.html sample by adding the code I quoted above, and it worked correctly.

In your app, I suggest that you debug it by making sure the new JavaScript Object being added to the model have all needed properties present with the expected values. Compare them with other data objects in the model.

You can also try calling Diagram.findNodeForKey or Diagram.findNodeForData to see if it returns non-null. If it does return a Node, look at its GraphObject.actualBounds to make sure all of those values are reasonable.