JSFiddle - React, Tailwind, and code Playground

by Dhinakar

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.3-all.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
 
<div id="dialog-content"> </div>
    
<div id="demo">
    <div class="window" id="w1"><a href="#">w0 </a></div>
            <div class="window" id="w2">w1</div>
            <div class="window" id="w3">w2</div>
            <div class="window" id="w4">w3</div>
            <div class="window" id="w5">w4</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);
}


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

JavaScript

jsPlumb.bind("ready", function() {
    jsPlumb.setRenderMode(jsPlumb.SVG);
   
    var targetEndPointParams = {
    dynamicAnchors: [ 'TopCenter','BottomCenter', 'RightMiddle', 'LeftMiddle' ],
    isSource: true,
    isTarget: true,
    maxConnections: 30,
    endpoint: 'Dot',
        dragOptions : {
           start:function() 
            {     
                var newDiv = $("<div class='window' style='border:1px solid red; left:20px; top:50px;'>foo</div>");         
               $("#demo").append(newDiv);
               jsPlumb.draggable(newDiv);
               jsPlumb.addEndpoint(newDiv, targetEndPointParams);                  }
       }
    
};

var sourceEndPointParams = {
    dynamicAnchors: [ 'TopCenter','BottomCenter', 'RightMiddle', 'LeftMiddle' ],
    isSource: true,
    isTarget: false,
    maxConnections: 30,
    endpoint: 'Rectangle',
       dragOptions : {
           start:function() { 
               var id = $('div').length;
              // alert(id);
                  var newDiv = $("<div class='window' style='border:1px solid red; left:20px; top:50px;'>foo</div>");          
               $("#demo").append(newDiv);
               
               jsPlumb.draggable(newDiv);
              // jsPlumb.addEndpoint(newDiv, targetEndPointParams);
              jsPlumb.connect({ source:e1, target:newDiv });
           }
       }
};
    
  
    
    jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:20 };
    jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ];                
                
    var e1 = jsPlumb.addEndpoint("w1",sourceEndPointParams);
    var e2 = jsPlumb.addEndpoint("w2", targetEndPointParams);
    var e3 = jsPlumb.addEndpoint("w3", targetEndPointParams);
    var e4 = jsPlumb.addEndpoint("w4", targetEndPointParams);
    var e5 = jsPlumb.addEndpoint("w5", targetEndPointParams);
    
  
    jsPlumb.connect({ source:e1, target:e2, paintStyle:{ dashstyle:"2 4", strokeStyle:"#465", lineWidth:5 } });
    
   ...