JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://morrisonpitt.com/jsPlumbTest/js/1.3.4/jquery.jsPlumb-1.3.4-RC1-all.js"></script>
<div class="workspace" id="workspace">
        <div class="window" id="div1">DIV 1</div>
        <div class="window" id="div2">DIV 2</div>        
    </div>

CSS

div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
}

div#div1{
    background-color: #eee;
    left: 50px;
    top: 50px;
    z-index: 100;
}

div#div2{
    background-color: #eee;
    left: 200px;
    top: 200px;
    z-index: 100;
}

div.workspace{
    left: 0px;
    top: 0px;
    width: 400px;
    height: 400px;
    overflow: scroll;
    position: relative;
}

JavaScript

$(document).ready(function() {
    var fillColor = "gray"; 
    jsPlumb.Defaults.Connector = [ "Bezier", { curviness:50 } ];
    jsPlumb.Defaults.DragOptions = { cursor: "pointer", zIndex:2000 };
    jsPlumb.Defaults.PaintStyle = { strokeStyle:"gray", lineWidth:2 };
    jsPlumb.Defaults.EndpointStyle = { radius:9, fillStyle:"gray" };
    jsPlumb.Defaults.Anchors =  [ "BottomCenter", "TopCenter" ];
    jsPlumb.Defaults.HoverPaintStyle = { strokeStyle:"silver", lineWidth:3 };
    
    jsPlumb.setDraggableByDefault(true);
    
    // declare some common values:
    var arrowCommon = { foldback:0.7, fillStyle:fillColor, width:14 };
    // use three-arg spec to create two different arrows with the common values:
    var overlays = [
        [ "Arrow", { location:0.5 }, arrowCommon ]
    ];
                
    jsPlumb.connect({source:"div1", target:"div2", overlays:overlays});
 });