Javascript 在图元的任一侧显示定位点/连接件

我正在使用jsPlumb JS库，我将元素放到画布上，然后尝试在端点/连接器处将它们彼此连接起来。但是对于我的查询对象，我需要两个锚点出现在元素的任一侧（左侧的“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;
    }

}

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');

函数dropCompleteQueryElement（新代理，即e）
{
$（droppedElement）.draggable（{containment:“container”}）；
var finalElement=新代理；
r++；q++；
var connectionIn=$（''）.attr（'id'，i+'-in'）.addClass（'connection'）.text（“in”）；
var connectionOut=$（''）.attr（'id'，i+'-out'）.addClass（'connection'）.text（'out'）；
finalElement.css({
“顶部”：e.pageY，
“左”：e.pageX
});
finalElement.append（connectionIn）；
finalElement.append（connectionOut）；
$（“#容器”）.append（finalElement）；
JS铅垂可拖动（最终安装{
遏制：“家长”
});
jsPlumb.makeTarget（连接在{
主播：“连续”
});
jsPlumb.makeSource（连接输出{
主播：“连续”
});
var myNode=document.getElementById（“lot”）；
var fc=myNode.firstChild；
while（fc）{
myNode.removeChild（fc）；
fc=myNode.firstChild；
}
}

使用单个连接器的css类解决了此问题。但是，如果有一种直接的方法/jsPlumb方法可以直接做到这一点，我也愿意接受建议

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;
    }

}

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');