JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id="demo">
  <div class="window" id="window1">x<input type=text id="1x" name="1x" value="" size="4"><br>
                                   y <input type=text id="1x" name="1x" value="" size="4">window one</div>
  <div class="window" id="window2">x<input type=text id="2x" name="2x" value="" size="4"><br>
                                   y <input type=text id="2y" name="2y" value=""size="4"> window two</div>
  <div class="window" id="window3">x<input type=text id="3x" name="3x" value="" size="4"><br>
                                   y <input type=text id="3y" name="3y" value="" size="4">window three</div>
</div>

<div id="container">

</div>

CSS

.window { 
    border:0.1em solid black;  
    width:100px;
    height:100px;
    position:absolute;
}

#window1 { left:2em;top:2em;}
#window2 { left:5em;top:10em;}
#window3 { left:20em;top:5em;}


#container{
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 50px;
}

JavaScript

jsPlumb.ready(function() {
    

  
            var fillColor = "gray";
            jsPlumb.Defaults.Container = [document.getElementById("container")];
jsPlumb.Defaults.Connector = [ "Flowchart", { stub:40 } ];
jsPlumb.Defaults.DragOptions = { cursor: "pointer", zIndex:2000 };
jsPlumb.Defaults.PaintStyle = { strokeStyle:"gray", lineWidth:1 };
jsPlumb.Defaults.EndpointStyle = { radius:4, fillStyle:"gray" };
jsPlumb.Defaults.Anchors =  [ "RightMiddle", "LeftMiddle" ];
    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:1 }, arrowCommon ]
            ];
             


        
            jsPlumb.connect({source:"window1", target:"window3", overlays:overlays});
            jsPlumb.connect({source:"window2", target:"window3", overlays:overlays});

    $(".window").draggable({
        drag:function(e){
            // Your code comes here
            console.log('draaag')
            jsPlumb.repaintEverything($(this));
        },
        stop: function(e){
            // Your code for capturing dragged element position.
            console.log($(this).offset());
        }
    })
    
});