Отображать якоря/разъемы с обеих сторон элемента

Question

Я работаю с библиотекой jsPlumb JS, где я отбрасываю элементы на холст, а затем пытаюсь соединить их друг с другом на своих конечных точках/коннекторах. Но для моего объекта запроса мне нужно, чтобы два якоря появлялись по обе стороны от элемента (якорь слева), а справа - анкер. Я попытался выровнять разделители соединений, как показано в моем коде ниже, но это не работает. В настоящее время они добавляются с одной стороны, слева. Был бы признателен за некоторый вклад в этом отношении.

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