jsPlumb: dragging new connection should remove existing one

Question

Using jsPlumb, I managed to have the following setup:

• There are multiple nodes acting like nodes in a special type of flowchart.
• Each node has one single target where connections can be dropped onto.
• Every node has zero, one or more exits. Each exit acts as jsPlumb source, and is allowed to have one connection at most.

Little example first: http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html (after an hour of trying, I unfortunately didn't get it to run on jsFiddle - so I host it myself)

What I want to achieve is: If the user drags a new connection from an exit to another node, it should be established as intended. But all the other connections being on this exit should be removed.

I tried different approaches:

• Having a click listener (links to jsPlumb documentation) on each exit bubble. Doesn't work -> the event never gets fired no matter what I tried.
• Having an instance connection listener . I thought I could get the existing connections from the endpoint in the info object I'm receiving. Open the console while looking at the example, and you see it's always 1, no matter how many connections there are.
• Limiting maxConnections for the makeSource(...) call to 1. This would actually work, but the user cannot drag another connection to replace the first.

Steps to reproduce:

1. Move your mouse to one of the orange squares, click and drag a connection another node. (connection should establish)
2. Open your browser's javascript console
3. Move your mouse to the same square and click/drag another connection to the same or another target node. (second connection should establish. watch the console printing Number of connections:1. This should be 2 here)

What am I doing wrong?

Answer 1

Before a new connection is established check whether the source already has outgoing connections, If so remove it. Assuming that exit elements have exit class:

jsPlumb.bind('beforeDrop', function(ci){ // Before new connection is created
    var src=ci.sourceId;
    var con=jsPlumb.getConnections({source:src}); // Get all source el. connection(s) except the new connection which is being established 
    if(con.length!=0 && $('#'+src).hasClass('exit')){
        for(var i=0;i<con.length;i++){
            jsPlumb.detach(con[i]);
        }
    }
    return true; // true for establishing new connection
});