jq+php+msyql 拖拽排序

最近的项目中涉及到了用户个性化定制首页的需求，用户要求可以随意拖动首页导航的位置，来实现个性化的布局。本文讲解如何使用jquery和PHP实现拖动布局并将拖动后的布局位置保存到数据库。

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置，也就是说拖动后各模块的排序位置信息是记录在客户端的 cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后，再次访问页面时，发现布局又还原成最初的状态。这种cookie记录的 方式使用简单，但不适合像个人中心、管理系统主页的要求。

本例实现的效果：

• 通过拖动随意布局页面模块。
• 记录拖动后模块的位置，并记录到数据库中。
• 页面永久性布局，用任意浏览器在任意时候打开，页面布局不变。（除非用户再次更改模块的排序，跟cookie没有关系）。

原理

采用jquery ui的sorttable拖动排序插件实现拖动效果。

将拖动后的模块的位置通过ajax传给服务端PHP程序。

PHP程序处理位置信息后，更新数据库中相应的字段内容。

HTML

<script type="text/javascript" src="__PUBLIC__/js/jquery-ui.min.js"></script>

 <ul class="nav navbar-nav" id="item-menu">
          <foreach name="department" item="v" >
            <li id="{$v.d_id}" title="{$v.sort}">
              <a href="javascript:void(0);"
                class="load-toggle"
                data-load="__URL__/development?depart={$v.d_id}"  
                data-key = "{$key}"
                data-id = "{$v.d_id}">
                {$v.d_name}
              </a>
            </li>
            <input type="hidden" id="orderlist">
            </foreach>
            <li class="dropdown">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
              worktile <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="https://worktile.zorelworld.com/"
                   target="_blank">
                  跳转
                </a>
              </li>
            </ul>
          </li>
        </ul>

JQ

$( function() {
    var list = $( "#item-menu" );
    //var show = $("#show"); //输出提示
    var orderlist = $("#orderlist"); //原顺序
    var order = [];
    list.children("li").each(function() {
      order.push(this.title); //原排列顺序保存在title，得到后更改title
      $(this).attr("title", "你可以拖动进行排序");
    });
    orderlist.val(order.join(','));

    var Update = function(itemid) {
      $.ajax({
          type: "post",
          url: "t",
          //id:新的排列对应的ID,order：原排列顺序
          data: {
            id: itemid,
            order: orderlist.val()
          },
          dataType:"json",
          success: function(msg) {
           
          }
      });
    };
    //调用ajax更新方法
    var Submit = function(update) {
      var order = [];
      list.children("li").each(function() {
        order.push(this.id);
      });
      var itemid = order.join(',');
      //如果单选框选中，则更新表中排列顺序
      if (!update) {
        Update(itemid);
      }
      else {
        show.html("");
      }
    };
    //执行排列操作
    list.sortable({
      opacity: 0.7,
      update: function() {
        Submit();
      }
    });


    // .sortable({

    // });
    $( "#item-menu" ).disableSelection();
  } );

PHP

将新的排列对的id做为key值，原排列的顺序做为value；

循环插入！

此方法不是效率最高的，如果数据量比较大的话直接循环修改是不明智的选择，个人想法是在修改前 取出数据库中的id或者排序字段与新的排序键值进行循环对比，筛选出不同的在进行循环修改，相比上边做法效率会有所提高！

如有更好的办法，还望告知！