StackOverFlow jsPlumb Test

by TheFiddler

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js"></script>

    <div position="absolute">
        <div id="a" class="a window" data-x="10">source A</div>
       
        <div id="c" class="c window">source C</div>

    </div>

CSS

.window {
    border: solid 1px;
    width: 50px;
    height: 50px;
    display: inline-block;

}

JavaScript

$(document).ready(function() {

    //Delete connections on click
    jsPlumb.bind("click", function(conn) {
        jsPlumb.detach(conn);
    });

    //Set initial positions for the nodes
    setInitialPositions();

    //make all nodes draggable
    jsPlumb.draggable($('.window'));

    //addEndpoints to each node
    $('.window').each(function(index, element) {
        makeSourceAndTarget(element);
    });

    //programmatically connect a to c
    connect('a', 'c');

});


//Connect two nodes
function connect(source, target){
    sourceEndpoint = jsPlumb.selectEndpoints({source: source}).get(0);
    targetEndpoint = jsPlumb.selectEndpoints({target: target}).get(0);
    console.log(sourceEndpoint, targetEndpoint);
    jsPlumb.connect({source: sourceEndpoint, target: targetEndpoint});
}


//Makes the element a source as well as target for connections
function makeSourceAndTarget(element) {
    var sourceAndTargetEndPointAttributes = {
        anchors: ["BottomLeft", "TopLeft", "TopCenter", "BottomCenter"],
        endpoint: ["Dot",
        {
            radius: 4}],
        connectorStyle: {
            lineWidth: 2,
            strokeStyle: '#666'
        },
        connector: ["Straight"],
        isSource: true,
        isTarget: true,
        maxConnections: -1,
        connectorOverlays: [["Arrow",
        {
            width: 8,
            length: 15}]],
        beforeDrop: function(conn) {
            return allowParent(conn);
        }
    };
    return jsPlumb.addEndpoint(element, sourceAndTargetEndPointAttributes);
};





function allowParent(conn) {
    var allowedParents = {
        'a': [],
        
        'c': ['a']
    };
    var source = conn.sourceId;
    var target = conn.targetId;
    return (allowedParents[target].indexOf(source) != -1);
};



function setInitialPositions() {

    $('.a').position({
        my: 'left top',
        at: 'left top',
        of: window,
        offset: '150 50'
    });
   
    $('.c').position({
        my:...