Hi,
Below is my code for creating the tables dynamically with rows and columns and the unique number (3rd field) and applying dragging for it.
When the tables are dragged the positions are stored in the DB of individual ones.
So once i exit from the application and revisit the next time i want all the tables to show the newly dragged positions.
Any help / suggestions on this will be appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IP Dragging</title>
<script src="jquery-1.7.2.js"></script>
<script src="jquery-ui.js"></script>
<style>
*{
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;
}
</style>
<script type="text/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();
mydiv = $('<div></div>').attr({ class: "innerdiv" });
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 +'),url(bg40x40.png)', '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'
});
$( "#box div.innerdiv" ).draggable({
cursor: "move",
revert: 'invalid',
grid: [ 40, 40 ] ,
drag: function(event) {
o = $(this).offset();
p = $(this).position();
cordsRC1=[];
var leftCal = $(this).position().left - $('#box').position().left;
var leftCalNew = leftCal / 40;
var topCal = $(this).position().top- $('#box').position().top;
var topCalNew = topCal / 40;
cordsRC1.push ( {"top":topCalNew,"left":leftCalNew});
},
stop: function(){
$(this).draggable('option','revert','invalid');
// $.each(cordsRC1, function(i,v){console.log(+v.top+","+v.left); });
}
});
}
function calculatePositions()
{
cordsRC=[];
$('.innerdiv').each(function()
{
//var iprows = new Number($("#iprcount").val());
//var ipcols = new Number($("#ipccount").val());
// alert('ipcols: ' + ipcols + ' iprows: ' + iprows);
var leftCal = $(this).position().left - $('#box').position().left;
var leftCalNew = leftCal / 40;
var topCal = $(this).position().top- $('#box').position().top;
var topCalNew = topCal / 40;
// alert('left: ' + leftCalNew + ' top ' + topCalNew);
var finalCal = (topCalNew + ',' + leftCalNew);
// var xEnd = leftCalNew + ipcols;
// var yEnd = topCalNew + iprows;
//alert('cols' + ipcols + 'rows ' + iprows + ' : ' + leftCalNew + '/' + xEnd + ' ' + topCalNew + '/' + yEnd);
//alert(finalCal);
cordsRC.push ( {"top":topCalNew,"left":leftCalNew});
$.each(cordsRC, function(i,v){console.log(+v.top+","+v.left); });
}
);
}
function getRowsCols(){
//$.extend(true, tables, cordsRC);
$.each(tables, function(i,v){
finalRCTL.push({"rows":v.rows, "cols":v.cols, "ipaddress":v.ipaddnew, "top":cordsRC[i].top, "left":cordsRC[i].left});
});
console.log(finalRCTL);
}
</script>
</head>
<body>
<!--input id="rcount" type="number"> <input id="ccount" type="number">
<button onclick="createCanvas()">Wall Canvas</button> <br/><br/-->
<input id="iprcount" type="number"> <input id="ipccount" type="number"> <input id="ipac" type="text">
<button onclick="createInsideTable()">Create IP</button>
<button onclick="calculatePositions()">Calculate Positions</button>
<button onclick="getRowsCols()">Read R&C</button>
<div id="box">
</div>
</body>
</html>