JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<input placeholder="Rows" id="iprcount" type="number"> &nbsp; <input placeholder="Columns" id="ipccount" type="number"> &nbsp; <input placeholder="IP" id="ipac" type="text">
<button onclick="createInsideTable()">Create IP</button> 

<button onclick="calculatePositions()">Calculate Positions</button>
<button onclick="getRowsCols()">Read R&C</button>
   <!--input placeholder="Left" id="leftcount" type="number"> &nbsp; <input placeholder="Top" id="topcount" type="number"> <button onclick="rePosition()">Reposition IP</button--> 

 <div id="box">

 </div>

CSS

*{

  margin: 0px; padding: 0px;
}

body{
  width: 100%; overflow: auto;
}

#box{
  border-color:  whitesmoke;
  background-color: whitesmoke;
  width: 500px;
  height: 500px;
}

  #basicTable {
    position: absolute;
  }

  .inneriptable{
     table-layout: fixed;
     border-collapse: collapse;
     float: left;
  }

 div.innerdiv{
  float: left;
 }

JavaScript

var maxHorPos = 0;
var maxVerPos = 0;

var cordsRC = [];
var finalRCTL = [];
 var tables = [];
function createInsideTable() 

{
     
    var tdip = {
      'TileHt': 40,
      'TileWd': 40
    };
    var iprows = $("#iprcount").val();
    var ipcols = $("#ipccount").val();
    var ipadds = $("#ipac").val();
    var ctr = 0;
   
    mydiv = $('<div></div>').attr({ class: "innerdiv" }).attr({id: ctr});
    mytable = $('<table></table>').attr({ class: "inneriptable" }).attr({ title: "IP"  });    
    var color = 'rgba(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',.8)';
    var counter = 1;  
    for (var i = 0; i < iprows; i++) {
        var row = $('<tr></tr>').appendTo(mytable);
        for (var j = 0; j < ipcols; j++) {
             //$('<td></td>').css({'background': 'linear-gradient(0deg, rgba(2,173,231,0.1), rgba(2,173,231,0.1)),url(bg40x40.png)', 'height':tdip.TileHt+'px','width':tdip.TileWd+'px','text-align':'center'}).text(counter++).appendTo(row); 

               $('<td></td>').css({'background': 'linear-gradient(0deg, '+ color +', '+ color +')', 'height':tdip.TileHt+'px','width':tdip.TileWd+'px','text-align':'center', 'border-radius':'5px'}).text(counter++).appendTo(row); 

        }
    }
    mytable.appendTo(mydiv);
    mydiv.appendTo("#box");

        tables.push ( {"rows":iprows,"cols":ipcols,"ipaddnew":ipadds});

       
       $.each(tables, function(i,v){console.log(+v.rows+","+v.cols+","+v.ipaddnew); });

       $( "#box div.innerdiv table.inneriptable" ).tooltip({ track: true});

    $('#box').droppable({
      tolerance: 'fit'
         // tolerance: 'touch',
       //   greedy: true,
       //   drop: function(event,ui){
      //  ui.draggable.draggable('option','revert',true);
  //  }
      });

    $( "#box div.innerdiv" ).draggable({ 
          cursor: "move", 
          revert: 'invalid',
          containment: "parent",
         ...