JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/sporritt/jsPlumb/jquery.jsPlumb-1.3.16-all.js"></script>
<div id="demo">
            <div class="window" id="w1">A</div>
            <div class="window" id="w2">B</div>
            <div class="window" id="w3">C</div>
        </div>

CSS

._jsPlumb_overlay { z-index:51; }
._jsPlumb_endpoint { z-index:50; cursor:move; }
._jsPlumb_connector { z-index:1; }

.window { border:1px solid #346789;
box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
width:5em; height:5em;
line-height:5em;
text-align:center;
z-index:20; position:absolute;
background-color:#eeeeef;
color:black;
font-family:helvetica;padding:0.5em;
font-size:0.9em;}
.window:hover {
box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #444;
    opacity:0.6;
filter:alpha(opacity=60);
}

.label {
    background-color:white;
}

.dropHover { border:1px solid orange; }
#w1 { top:10em;left:22em;}
#w2 { top:3em;left:3em;}
#w3 { top:19em;left:4.5em;}
#w4 { top:19em;left:26em;}

JavaScript

jsPlumb.ready(function() {
    
    jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"];
    
    var endpoint_complex = {    
        isSource:true,
        maxConnections:10,
        isTarget:true,
        connectorOverlays:[ 
        [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], 
            [ "Label", { cssClass:"label", location: 0.20, label:"label1", id:"label_endpoint1" } ],
            [ "Label", { cssClass:"label", location: 0.50, label:"label2", id:"label_endpoint2" } ],
            [ "Label", { cssClass:"label", location: 0.80, label:"label3", id:"label_endpoint3" } ]
        ],
        dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
    };
    
    var endpoint_simple = {   
        isSource:true,
        maxConnections:10,
        isTarget:true,
        dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
    };
    
    
    jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:20 };
    jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ];                
                
    var e1 = jsPlumb.addEndpoint("w1", endpoint_complex);
    var e2 = jsPlumb.addEndpoint("w2", endpoint_simple);
    var e3 = jsPlumb.addEndpoint("w3", endpoint_simple);

    // connect A & B, getting a connection that has a label
    var c = jsPlumb.connect({ source:e1, target:e2, paintStyle:{ dashstyle:"2 4", strokeStyle:"#465", lineWidth:5 } });

    var o = c.getOverlay("label_endpoint1");
    
    // make 'o.canvas' an endpoint, the UI component associated 
    // with the overlay
    var t1 = jsPlumb.makeTarget($(o.canvas), endpoint_simple, {anchor:"BottomCenter"});
    var t2 = jsPlumb.makeTarget($(c.getOverlay("label_endpoint2").canvas), endpoint_simple, {anchor:"BottomCenter"});
    var t3 = jsPlumb.makeTarget($(c.getOverlay("label_endpoint3").canvas), endpoint_simple, {anchor:"BottomCenter"});
    
    //jsPlumb.connect({ source:e2, target:t2, paintStyle:{ dashstyle:"2 4", strokeStyle:"#465", lineWidth:5 } });
    
   ...