jsPlumb: Avoiding multiple connectors between divs

Question

Experts,

I'm using jsPlumb to connect divs with multiple endpoints. I'm trying to prevent multiple connectors between the same two divs. So for example, if I have divs A, B, C, connectors between A and B, A and C are ok but not two connectors between A and B (using different endpoints).

Does anyone know how to do this?

Thanks!

Answer 1

It depends a lot of your code, but you can do something like this:

var exampleEndpoint = {
    reattach:true,
    scope:"yourScope",
    isSource: true,
    isTarget:true,
    beforeDrop:function(params) { return !checkExistingLinks(params.sourceId,params.targetId); }
};

function checkExistingLinks(sourceId, targetId) {
    var flag = false;

    jsPlumb.select({source: sourceId}).each(function(connection) {
        if(connection.targetId === targetId) {
            flag = true;
        }
    });

    return flag;
}

That is, you need to identify a connection attempt and then verify if the elements involved already have a connection. jsPlumb.select() returns for you a list (or map) of this connections.