ソース
javascript
$(function(){
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [100, 100]
});
var gridster = $(".gridster ul").gridster().data('gridster');
$("#add").click(function(){
var dataSizex = parseInt(1 + Math.random() * 2);
var dataSizey = parseInt(1 + Math.random() * 2 );
var tileColor = parseInt(1 + Math.random() * 3)
gridster.add_widget('<li class="new tile0' + tileColor + '"'>'</li>', dataSizex , dataSizey);
gridster.remove_widget( $('.gridster li').eq(1) );
});
});
HTML
<div class="alignC">
<button class="btn btn-primary" id="add">追加・削除</button>
</div>
<hr />
<div class="gridster">
<ul class="unstyled">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="tile02"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2" class="tile03"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1" class="tile02"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="tile01"></li>
</ul>
</div>
CSS
div.gridster{
background-color:#CCCCCC;
}
li.tile01{
background-color:#FFCCCC;
}
li.tile02{
background-color:#CCFFCC;
}
li.tile03{
background-color:#CCCCFF;
}
li.tile04{
background-color:#CCFFFF;
}