避免在jsPlumb中覆盖连接和元素

Question

我正在使用jsPlumb在页面中的元素之间创建连接，而我遇到了麻烦，因为创建的连接覆盖了网站上的一些元素。

我的连接是动态创建的，因此我无法预测它们的外观。我只想在必要时避免重叠。

我更改了重叠元素的z-index属性，并在后面显示了连接。

但是，我正在寻找的是以不通过我网站中的那些元素的方式创建连接。

我正在寻找类似的东西：

jsPlumb有可能吗？ 感谢。

Answer 1

是的，可以使用anchor选项（ SOURCE ）。根据您的要求设置anchor:Top。例如：

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

JsFiddle

Answer 2

您可以在元素之间添加连接点，以便更好地控制连接路径（尽管这仍然需要处理定位这些点的逻辑）。 这是一个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;
}