JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="ui-browser"><div class="anchor"></div>
     <div id="control-library" class="library">
       <div class="name-title">Control Library</div>
       <ul>
         <li>Control A</li>
         <li>Control B</li>
         <li>Control C</li>
         <li>Control D</li>
       </ul>
     </div><!--
--></div><!--
--><div id="canvas">
     <svg id='connector_canvas'></svg>
     <div class="ui-item item-1"><div class="con_anchor"></div></div>
     <div class="ui-item item-2"><div class="con_anchor"></div></div>
     <div class="ui-item item-3"><div class="con_anchor"></div></div>
     <div class="ui-item item-1"><div class="con_anchor"></div></div>
     <div class="ui-item item-2"><div class="con_anchor"></div></div>
     <div class="ui-item item-3"><div class="con_anchor"></div></div>
   </div><!--
--><div id="property-browser"></div>

CSS

html,body{width:100%;height:100%}
html,body,div{margin:0px;padding:0px;}

#ui-browser,#canvas,#property-browser{
  height:100%;
  display:inline-block;
  box-sizing:border-box;
  position:relative;
}

#ui-browser{
  width:20%;
  background-color:#eee;
  float: left;
  overflow:hidden;
}

#canvas{
  width:60%;
  right: 2;
}

#property-browser{
  width:20%;
  background-color:#eee;
}


/*Anchor CSS*/
.anchor{
  opacity:0.5;
  width: 10px;
  height: 100%;
  background-color: #0ebeff;
  position: absolute;
  transition: width ease-in-out 0.2s;
}

#ui-browser:hover > .anchor, #property-browser:hover > .anchor{
  background-color: #ffbe00;
  width: 10px;
  opacity:1;
}

#ui-browser .anchor{
  right:0px;
}

.ui-item{
  postion:absolute;
  width:50px;
  height:50px;
  background-color:#eef;
  top:-2px;
  left:-2px;
}

.con_anchor{
    width: 8px;
    height: 8px;
    background-color: #47cf73;
    border-radius: 50%;
    z-index:5;
}

#connector_canvas{
  position:absolute;
  width:100%;
  height:100%;
  stroke:#5c96bc;
  stroke-width:2
}

.library{
  border-left:10px solid #5c96bc;
  background-color:white;
  color:#0ebeff;
  padding-bottom: 1px;
}

.library ul{
  list-style-type:none;
}

.library .name-title{
  text-align:center;
  padding-top:5px;
}

.library ul li{
  border-bottom:1px solid #eee;
  margin-right:20px;
  color:#4c4545;
  padding: 5px;
  margin-left: 15px;
  cursor: pointer;
  transition: all ease-out 0.1s; 
}

.library ul li:hover{
  background-color:#4c4545;
  color:white;
  text-align:center;
  font-size:1.2em;
}

JavaScript

!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);



$('.anchor').on('click',function(){
   var width = parseInt($(this).parent().css('width'));
   if(width==10){
     $(this).parent().css('width','20%');
     $('#canvas').css('width','60%');
   }else{
      $(this).parent().css('width','10px');
      $('#canvas').css('width','calc( 80% - 10px)');
   }
});

$('.ui-item').draggable({
  containment: "#canvas",
  drag: function( event, ui ) {
           var lines = $(this).data('lines');
           var con_item =$(this).data('connected-item');
           var con_lines = $(this).data('connected-lines');
  
           if(lines) {
             lines.forEach(function(line,id){
             		$(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);  
             }.bind(this));
           }
    
           if(con_lines){
               con_lines.forEach(function(con_line,id){
                 ...