javascriptjqueryjsplumb

jsPlumb: dragging new connection should remove existing one


Using jsPlumb, I managed to have the following setup:

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:

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?


Solution

  • 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
    });