JSFiddle - React, Tailwind, and code Playground

by abhilash aruva

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.2.9/jsplumb.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="jsplumbCont">
  <div id='item1' class='box'>
    Item 1
  </div>
  <div id="item2" class='box'>
    Item 2
  </div>
  <div id="item3" class='box'>
    Item 3
  </div>
</div>

CSS

.box {
  padding: 20px;
  position: absolute;
  display: inline-block;
  background-color: blue;
  color: #fff;
  width: 50px;
  height: 50px;
}
#item1{
  left: 0;
}
#item2{
  top: 200px;
}
#item3{
  top: 200px;
  left: 150px;
}

JavaScript

jsPlumb.ready(function()
{
	jsPlumb.setContainer($('#jsplumbCont'));
  jsPlumb.draggable([$('#item1'),$('#item2'),$('#item3')]);
   
  
  jsPlumb.connect({
      source:$('#item1'),
      target:$("#item2"),
      endpoint:"Dot",
      connector: ["Flowchart", { stub: 25, midpoint: 0.001 }],
      anchors:[
          [ "Perimeter", { shape:"Square" } ],
          [ "Perimeter", { shape:"Square" } ]
      ]
  });
  jsPlumb.connect({
      source:$('#item1'),
      target:$("#item3"),
      endpoint:"Dot",
      connector: ["Flowchart", { stub: 25, midpoint: 0.001 }],
      anchors:[
          [ "Perimeter", { shape:"Square" } ],
          [ "Perimeter", { shape:"Square" } ]
      ]
  });
});