JSFiddle - React, Tailwind, and code Playground

by prince4prodigy

HTML

<body> 
<div id="container" class="container-container-fluid">
      <div class="row-fluid">
        <div id="main" class="span5">
          <div id="div1" class="item drag drop">1</div>

          <div id="div2" class="item drag drop">2</div>

          <div id="line"></div>

          <div id="line2"></div>

          <div id="div3" class="item drag drop">3</div>

          <div id="div4" class="item drag drop">4</div>
        </div>
      </div>
    </div>

    <div id="test"></div>
    
</body>

CSS

#container {
    position:relative;
    background-color:#f5af69;
    border:1px solid #643506;
    height:400px;
  }

 .item {
    position:absolute;
    width:25px;
    height:25px;
    background-color:#ffef2d;
    border:1px solid red;
    text-align:center;
    line-height:25px;
  }

  #div1 {
    left:10%;
    top:10%;
  }

  #div2 {
    left:35%;
    top:80%;
    }

    #div3 {
      left:75%;
      top:30%;
    }

    #div4 {
      left:50%;
      top:50%;
    }

    .hover {
      opacity:0.4;
    }

    .active {
      background-color:#fa58fe;
    }

    #line {
      width:100%;
      height:3px;
      background-color:#342903;
      top:50%;
      position:absolute;
    }

    #line2 {
      width:3px;
      height:100%;
      background-color:#342903;
      left:50%;
      position:absolute;
    }





























/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto...

JavaScript

$( ".drag" ).draggable({ 
            containment : '#container',
            tolerance: 'touch',
          });