PHP+jQuery-ui實(shí)現(xiàn)的拖動浮動層排序布局并將拖動后的浮動層位置排序結(jié)果保存到數(shù)據(jù)庫實(shí)例。

首先引入jQuery庫和jquery-ui.min.js,接著放置一個(gè)拖動時(shí)的加載圖片，和從數(shù)據(jù)庫讀取出來的多個(gè)模塊拖動層.modules，及#orderlist用于記錄模塊的排序值 。

<script type="text/javascript" src="jquery.js"></script>   <script type='text/javascript' src='js/jquery-ui.min.js'></script> <div id="loader"></div>   <div id="module_list">   <input type="hidden" id="orderlist" value="<?php echo $sort; ?>" />      <!--?php                  for ($i = 0; $i < $len; $i++) {                      ?-->      <div class="modules" title="<?php echo $sort_arr[$i]; ?>">       <h3 class="m_title">Module:       <!--?php echo $sort_arr[$i]; ?--></h3>       <p>       <!--?php echo $sort_arr[$i]; ?--></p>      </div>      <!--?php } ?-->      <div class="cl"></div>   </div>

頁面js:

$(function() {      $(".m_title").bind('mouseover',      function() {          $(this).css("cursor", "move")      });        var $show = $("#loader"); //進(jìn)度條      var $orderlist = $("#orderlist");      var $list = $("#module_list");        $list.sortable({          opacity: 0.6,          revert: true,          cursor: 'move',          handle: '.m_title',          update: function() {              var new_order = [];              $list.children(".modules").each(function() {                  new_order.push(this.title);              });              var newid = new_order.join(',');              var oldid = $orderlist.val();              $.ajax({                  type: "post",                  url: "update.php",                  data: {                      id: newid,                      order: oldid                  },                  //id:新的排列對應(yīng)的ID,order：原排列順序                  beforeSend: function() {                      $show.html("<img src='images/load.gif' /> 正在更新");                  },                  success: function(msg) {                      $show.html("");                  }              });          }      });  });

拖動后保存到數(shù)據(jù)庫，ajax.php中的代碼：

$order = $_POST['order'];  $itemid = trim($_POST['id']);  if (!empty($itemid)) {      if ($order != $itemid) {          $query = mysql_query("update sortlist set sort='$itemid' where id=1");          if ($query) {              echo $itemid;          } else {              echo "none";          }      }  }