mouseDrop Event - capture item being droped/dragge


I have Created and Palette and am dropping objects from that palette into the main diagram.

Currenrtly my node is being added in open(without any links) but I want it to be added as a child of my root node.

I tried using diagram class’ mouseDrop Event but could not find the item being droped. If I could do that I will use the item’s data to add a node with basic model Diagram.model.addNodeData and Diagram.model.addLinkData.

Please Suggest.


You probably want to use an ExternalObjectsDropped diagram listener:

  myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) {
    var newnode = myDiagram.selection.first();
    // do something with newnode
1 Like


Now when I drop in blank space, a link is created from the triangular node to the new node.Smile

However, I still got one issue. When I drop on any other node, the above said link is still getting created but, I want that only when i drop new item in blank space and not when I drop on nodes(because in that case we need it to be added as a child to those nodes).

Have a look at Flowgrammer:

It does two things. First, all nodes have a “mouseDrop” defined, which will connect the newly added node to the other nodes and links present.

Then it also has an ExternalObjectsDropped listener defined, but it just makes sure the newly added node is connected, and if it isn’t, it deletes it.

You could use a combination of Node.mouseDrop and the listener ExternalObjectsDropped too, but with different functionality for your purposes.


The issue was that both node’s mouseDrop and diagram’s ExternalDrop events were firing in case I dropped on the node.

I solved it by setting key of my node in node’s mouseDrop and checking if its been set or not in diagram’s ExternalDrop. If its been set earlier in node’s mouseDrop … RETURN Big smile

Solved Thumbs Up