显示元素两侧的锚点/连接器

Question

我正在使用JS的jsPlumb库，我将元素放到画布上，然后尝试在它们的端点/连接器上将它们相互连接。但对于我的查询对象，我需要两个锚点出现在元素的两侧（左边的“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类解决了各个连接器的问题。但是如果直接使用/ 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%;
}