StackOverFlow jsPlumb Test

by taoist

HTML

<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all-min.js"></script>
<html>
    <head>
        <title></title>
    </head>
<body>
    <div>
        <div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px">VL0071P1</div>
        <div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
    </div>
</body>
</html>

CSS

.window {
    background-color: white;
    border: 3px solid #346789;
    color: black;
    font-family: helvetica;
    font-size: 0.8em;
    height: 12em;
    opacity: 1.8;
    padding: 0.5em;
    position: absolute;
    width: 14em;
    z-index: 20;
    text-align:center;
}

.dragActive {
    border: 3px solid #346789;
}

JavaScript

$(document).ready(function() {
    
    //$(".window").draggable();
    
    var a = $("#a");
    var b = $("#b");
    
    //Setting up drop options
    var targetDropOptions = {
            tolerance:'touch',
            hoverClass:'dropHover',
            activeClass:'dragActive'
    };
    
    //Setting up a Target endPoint
    var targetColor = "#316b31";
    var targetEndpoint = {
       endpoint:["Dot", { radius:8 }],
       paintStyle:{ fillStyle:targetColor},
       //isSource:true,
       scope:"green dot",
       connectorStyle:{ strokeStyle:targetColor, lineWidth:8 },
       connector: ["Bezier", { curviness:0 } ],
       maxConnections:3,
       isTarget:true,
       dropOptions : targetDropOptions
    };
    
    //Setting up a Source endPoint
    var sourceColor = "#ff9696";
    var sourceEndpoint = {
       endpoint:["Dot", { radius:8 }],
       paintStyle:{ fillStyle:sourceColor},
       isSource:true,
       scope:"green dot",
       connectorStyle:{ strokeStyle:sourceColor, lineWidth:8 },
       connector: ["Bezier", { curviness:0 } ],
       maxConnections:3,
       //isTarget:true,
       //dropOptions : targetDropOptions
    };
    
    
    //Set up endpoints on the divs
    jsPlumb.addEndpoint($(".window") , { anchor:"TopCenter" }, targetEndpoint);
    jsPlumb.addEndpoint($(".window") , { anchor:"BottomCenter" }, sourceEndpoint);
    
    jsPlumb.draggable($(".window"));
    
    
});