JSFiddle - React, Tailwind, and code Playground

by bfelda

HTML

<script src="https://community.jsplumbtoolkit.com/js/dom.jsPlumb-1.7.6-min.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:300px;left:100px;}
#w2 { top:50px;left:300px;}
#w3 { top: 350px; left:300px;}

JavaScript

jsPlumb.ready(function() {
         
    var e1 = jsPlumb.addEndpoint("w1", {
        anchor:"Bottom"
    });
    
    var e11 = jsPlumb.addEndpoint("w1", {
        anchor:"Bottom"
    });
    
    var e3 = jsPlumb.addEndpoint("w2", {
        anchor:"Center"
    });
    
    var e4 = jsPlumb.addEndpoint("w3", {
        anchor:"Top"
    });
    
    jsPlumb.connect({source:e1, 
                     target:e3, 
                     connector: ["Flowchart", {
                            cornerRadius: 5,
                            alwaysRespectStubs: true,
                            stub: [30, 30],
                            midpoint: .5
                        }]
                    });
    
    jsPlumb.connect({source:e4, 
                     target:e11, 
                     connector: ["Flowchart", {
                            cornerRadius: 5,
                            alwaysRespectStubs: true,
                            stub: [30, 30],
                            midpoint: .5
                        }]
                    });
    
    jsPlumb.draggable($(".window"));
});