JSFiddle - React, Tailwind, and code Playground

by Jaak Kütt

HTML

<script src="http://jsplumbtoolkit.com/demo/js/jquery.jsPlumb-1.5.5-min.js"></script>
1. open console<br />
<button id="btn1">2. click me to detach connections</button><br />
<button id="btn2">3. click me to call the error on redrawing</button><br />

<div class="window" id="w1">from 1</div>
<div class="window" id="w2">from 2</div>
<div class="window" id="w3">from 3</div>
<div class="window" id="w4">to 4</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);
}


.dropHover { border:1px solid orange; }
#w1 { 
    top:7em;
    left:2em;
}
#w2 { 
          top:15em;
    left:25em;
    width: 7em;
    height:7em;
}
#w3 { 

      top:25em;
    left:2em;
    width: 6em;
    height:3em;
}
#w4 { 

    top:10em;
    left:12em;
    width:8em;
    height:8em;
    background-color:green;
}

JavaScript

/***************/
/* STYLE START */
/***************/

var Plumb_Binder = {
    connections:{},    
    dynamicAnchors : [ "LeftMiddle",  "LeftMiddle", "RightMiddle", "RightMiddle" ],
    connectorType : [ "Bezier", {  } ],
    connectorPaintStyle : {
            lineWidth:2,
            strokeStyle:"white",
            joinstyle:"round",
            outlineColor:"black",
            outlineWidth:2
    },
    endpointHoverStyle : {
        fillStyle:"black",
        strokeStyle:"black"
    },
    connectorHoverStyle : {
        lineWidth:2,
        strokeStyle:"black",
        joinstyle:"round",
        outlineColor:"black",
        outlineWidth:2
    },
    soursestyle:function(){
        return {
           anchor:Plumb_Binder.dynamicAnchors,
           connector:Plumb_Binder.connectorType,
           connectorStyle:Plumb_Binder.connectorPaintStyle,
           hoverPaintStyle:Plumb_Binder.endpointHoverStyle,
           connectorHoverStyle:Plumb_Binder.connectorHoverStyle,
           endpoint:"Dot",
           uniqueEndpoint:false,
           paintStyle:{ 
               strokeStyle:"black",
               fillStyle:"#f18383",
               radius:9,
               lineWidth:3 
           }	
       };
    },
    targetstyle:function(){
        return { 
           isTarget:true, 
           anchor:Plumb_Binder.dynamicAnchors,
           connector:Plumb_Binder.connectorType,
           connectorStyle:Plumb_Binder.connectorPaintStyle,
           hoverPaintStyle:Plumb_Binder.endpointHoverStyle,
           endpoint:"Dot",
           paintStyle:{ 
               strokeStyle:"black",
               fillStyle:"#69c269",
               radius:9,
               lineWidth:3 
           }
       };
    }
};

/*************/
/* STYLE END */
/*************/

jsPlumb.bind("ready", function() {
       jsPlumb.makeSource('w1',Plumb_Binder.soursestyle() );
       jsPlumb.makeSource('w2',Plumb_Binder.soursestyle() );
       jsPlumb.makeSource('w3',Plumb_Binder.soursestyle() );
 ...