요소의 양쪽에 앵커/커넥터 표시

Question

JS의 jsPlumb 라이브러리에서 요소를 캔버스에 놓은 다음 각 요소를 끝점/커넥터에서 서로 연결하려고합니다. 그러나 쿼리 개체의 경우 두 요소가 요소의 양쪽에 표시되어야합니다 (왼쪽의 "내부"앵커 및 오른쪽의 "외부"앵커). 아래 코드에서 보듯이 연결 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%; 
}