在元素的任一侧显示 anchors/connectors

Question

我正在使用 JS 的 jsPlumb 库，我将元素放到 canvas 上，然后尝试在它们的 endpoints/connectors 处将它们相互连接起来。但是对于我的查询对象，我需要两个锚点出现在元素的两侧（左侧的 "in" 锚点和右侧的 "out" 锚点）。我尝试按照下面的代码所示对齐连接 div，但它不起作用。目前，两者附加在同一侧，即左侧。希望在这方面提供一些意见。

JS函数

function dropCompleteQueryElement(newAgent,i,e) 
{
    $(droppedElement).draggable({containment: "container"});

    var finalElement =  newAgent;
    r++; q++;

    var connectionIn = $('<div align="left">').attr('id', i + '-in').addClass('connection').text("in");
    var connectionOut = $('<div align="right">').attr('id', i + '-out').addClass('connection').text('out');

    finalElement.css({
        'top': e.pageY,
        'left': e.pageX
    });

    finalElement.append(connectionIn);
    finalElement.append(connectionOut);

    $('#container').append(finalElement);

    jsPlumb.draggable(finalElement, {
        containment: 'parent'
    });

    jsPlumb.makeTarget(connectionIn, {
        anchor: 'Continuous'
    });

    jsPlumb.makeSource(connectionOut, {
        anchor: 'Continuous'
    });

    var myNode = document.getElementById("lot");
    var fc = myNode.firstChild;

    while( fc ) {
        myNode.removeChild( fc );
        fc = myNode.firstChild;
    }

}

Answer 1

为各个连接器使用 css class 解决了这个问题。但如果有直接的方法/jsPlumb 方法可以直接执行此操作，我也会接受建议。

JS函数

function dropCompleteQueryElement(newAgent,i,e) 
{
    $(droppedElement).draggable({containment: "container"});

    var finalElement =  newAgent;
    r++; q++;

    var connectionIn = $('<div class="connectorIn">').attr('id', i + '-in').addClass('connection').text("in");
    var connectionOut = $('<div class="connectorOut">').attr('id', i + '-out').addClass('connection').text('out');

CSS

.connectorIn{
    float: left;
    margin-top: 25%;
    margin-left: -10%;
}

.connectorOut{
    float: right;
    margin-top: 25%;
    margin-right: -10%;
}

在元素的任一侧显示 anchors/connectors

Display anchors/connectors on either side of an element

javascript

anchor

position

endpoint

jsplumb