gridster.js 页面任意拖动布局保存数据库。

需要引入的css和js

<link rel="stylesheet" type="text/css" href="gridster/gridster.css">
  <script src="jquery-1.8.3.js" type="text/javascript"></script>
  <script src="gridster/gridster.js" type="text/javascript" charset="utf-8"></script>

下面附上JS代码

<script type="text/javascript">
      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({//通过jquery选择DOM实现gridster
          widget_base_dimensions: [200, 220],//模块的宽高 [宽,高]
          widget_margins: [5, 5],//模块的间距 [上下,左右]
//示例：autogenerate_stylesheet: true
//说明：默认是true，用控制台查看你会发现在head结束前插入了<style>样式代码，大概是这样 [data-col="1"] { left: 10px; }，这些决定了拖动模块的相对位置，如果设置为false，你就要手动的定义这些模块的位置（top和left）
//  resize:{enabled: true},//模块右下角拖动大小默认为false
          draggable: {
            handle: 'header',//模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"，标识拖动的是<header>.
//start:function(event,ui){alert('开始拖')},//开始拖触发的，从点击开始!
stop:function(event, ui){//结束拖动，从放下模块开始！
$.ajax({
url:"<%=basePath%>p/fda/fileDel?filePath=",
type:"get",
dataType:"json",
async:false,
success:function(data){
}
});
//可以每拖完一次ajax请求数据库保存。
//也可以从start里面开始拖的时候显示个提交的框框，拖完了点击提交后进行ajax请求数据库！
}
          }
        }).data('gridster');

      });
    </script> 

页面的代码及注释

   <div class="gridster">
   <!--data-row第几行 -->
   <!--data-col第几个位置 -->
   <!--data-sizex模块宽度如果小于当前布局的位置自己自动往最左移动 也可以判断一行总共多少块
  例如：data-row都为1,第一行，data-sizex的参数分别为1、2、3、2、2，那么这个页面的横向模块总共有10个。
  这样第二行就必须也要分为10块或小于10快。
   -->
   <!--data-sizey的参数跟 横向x的意思差不多。每一行取一个的最大值相加的和必须等于data-row的参数 -->
   <!-- 在AJAX请求数据库的时候，为了更好的布局4个参数最好。在每个快都有估计大小的时候，
data-sizex参数就可以不用，但是如果不用，那data-col的参数可以为each循环的count值。data-sizey高度必要，如果没有，则不能拖动 -->
    <ul>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="1">
        <header>我的日程</header>
        0
      </li>
      <li data-row="1" data-col="2" data-sizex="2" data-sizey="1" id="2">
        <header>任务管理</header>
        1
      </li>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="1" id="3">
        <header>个人信息</header>
        2
      </li>
 <li data-row="3" data-col="1" data-sizex="1" data-sizey="2" id="4">
        <header>我的收件</header>
        3
      </li>
      <li data-row="3" data-col="2" data-sizex="2" data-sizey="2" id="5">
        <header>知识园地</header>
        4
      </li>
      <li data-row="3" data-col="4" data-sizex="1" data-sizey="2" id="6">
        <header>我的网盘</header>
        5
      </li>
    </ul>
  </div>