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>