Atmocreations Atmocreations - 1 year ago 86
Javascript Question

jsPlumb: dragging new connection should remove existing one

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:
(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
    (links to jsPlumb documentation) on each exit bubble. Doesn't work -> the event never gets fired no matter what I tried.

  • Having an instance
    . I thought I could get the existing connections from the endpoint in the
    object I'm receiving. Open the console while looking at the example, and you see it's always
    , no matter how many connections there are.

  • Limiting
    for the
    call to
    . 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

What am I doing wrong?

Answer Source

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++){
    return true; // true for establishing new connection
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download