JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="https://raw.github.com/sporritt/jsPlumb/master/build/1.3.16/js/jquery.jsPlumb-1.3.16-all.js"></script>
<div id="demo">
    <div class="window" id="w1"></div>
    <div class="window" id="w2"></div>
    <div class="window" id="w3"><button id="button">Try Me <br />-_-</button></div>
</div>

CSS

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

.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:10em;left:3em;}
#w2 { top:10em;left:17em;}
#w3 { top:15em;left:10em; }
#button {width: 100%; height:100%;}
#button:active {background-color: orange;}

JavaScript

jsPlumb.bind("jsPlumbConnection", function(info) {
  console.log("setting up connection paint binding");
  var c = info.connection, p = c.paint;

  c.paint = function() {
    p.apply(c, arguments);
    $(c.canvas).find("path").css("pointer-events", "visibleStroke");
  };
});

jsPlumb.bind("ready", function() {
    jsPlumb.setRenderMode(jsPlumb.SVG);
    
    var endpoint = {       
        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);
    var e2 = jsPlumb.addEndpoint("w2", endpoint);

    
    jsPlumb.draggable("w1");
    jsPlumb.draggable("w2");
    
    jsPlumb.connect({ source:e1, target:e2});
 
    console.log("connected");
});