Avoid overlaying of connections and elements in jsPlumb

Question

I'm using jsPlumb to create connection between elements in the page and I'm having troubles because the created connections overlay some elements on the site.

My connections are created dynamically so I can not predict the way they should look. I just want to avoid overlapping when necessary.

I've changed the z-index property of the overlayed elements and the connection is showed behind them.

However, what I'm looking for is to create the connection in a way that it doesn't goes through those elements in my site.

I'm looking for something like this:

Is that possible with jsPlumb? Thanks.

Answer 1

Yes, it is possible with anchor option(SOURCE). For your requirement set anchor:Top. Example:

jsPlumb.connect({...., anchor:"Top", ... }); 

JsFiddle

Answer 2

You could add connection points between the element in order to gain better control over the connections path (although this would still require handling the logic of positioning these points). Here is an example:

ConnectBoxes($("#box1"), $("#box3"));

function ConnectBoxes(sourceDiv, targetDiv) {
    var connectionPointTop = targetDiv.position().top + targetDiv.height() / 2;
    var connectionPointLeft = sourceDiv.position().left + sourceDiv.width() / 2
     var connectionPoint1 = AddConnectionPoint("connectionPoint1", connectionPointTop, connectionPointLeft);
    jsPlumb.connect($.extend({
    source: 'box1',
    target: 'connectionPoint1',
}, options));
    jsPlumb.connect($.extend({
    source: 'connectionPoint1',
    target: 'box3',
}, options));
}


function AddConnectionPoint(divID, top, left) {
    var connectionPoint = $("<div></div>").attr({id: divID}).addClass("ConnectionPoint").css({"left": left + "px", "top": top + "px"});
    $("#divMain").append(connectionPoint);
    return connectionPoint;
}

div.ConnectionPoint {
    border: 3px solid #F00;
    position: absolute;
    width: 0px;
    height: 0px;
}