gridster.js
gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局，支持多列布局，你还可以动态的添加和删除表格中的元素。
使用
引入类库，包括jQuery和gridster.js：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
然后导入gridstrer的css文件：
<link type="text/css" href="css/jquery.gridster.min.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Girdster JS</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css"></head> <body> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li> </ul> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridster.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function() { $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] }); }); </script> </body> </html>