Anzeigen Anker/Anschlüsse auf beiden Seiten eines Elements

Question

Ich arbeite mit der JsPlumb-Bibliothek von JS, wo ich Elemente auf einer Leinwand ablegen und dann versuchen, sie an ihren Endpunkten/Anschlüssen miteinander zu verbinden. Aber für mein Abfrageobjekt müssen die zwei Anker auf jeder Seite des Elements erscheinen (der "in" -Anker auf der linken Seite und der "out" -Anker auf der rechten Seite). Ich habe versucht, die Verbindung Divs wie in meinem Code unten ausgerichtet, aber es funktioniert nicht. Derzeit sind die beiden auf der gleichen Seite, der linken Seite angehängt. Ich würde mich über einige Hinweise in dieser Hinsicht freuen.

JS Funktion

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

es Gelöst eine CSS-Klasse für die einzelnen Anschlüsse verwenden. Aber wenn es eine direkte Weise/jsPlumb-Methode gibt, um dies direkt zu tun, werde ich auch für Vorschläge offen sein.

JS Funktion

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