JSFiddle - React, Tailwind, and code Playground

by rafmaz

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line/required/script/jquery.connectingLine.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line/required/script/jquery.svg.min.js"></script>
<div class="node1">Drag Me</div>
<div class="node2">Drag Me</div>

CSS

.node1 {
    position: absolute;
    width: 100px;
    background: #666;
    color: #fff;
    padding: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
}.node2 {
    position: absolute;
    width: 100px;
    background: #F99;
    left: 300px;
    padding: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
}

JavaScript

var mySVG = $('body').connectSVG();
	mySVG.drawLine({
	left_node:'.node1',
	right_node:'.node2',
	horizantal_gap:10
	});
	$( ".node1" ).draggable({
	  drag: function(event, ui){mySVG.redrawLines();}
	});
	$( ".node2" ).draggable({
	  drag: function(event, ui){mySVG.redrawLines();}
	});