萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery對元素拖動排序示例

jquery對元素拖動排序示例

 對元素進行拖動排序的實現方法有很多,在本文為大家介紹下使用jquery來完成這個工作,希望對大家有所幫助

 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>jquery學習-jquery對元素拖動排序</title>  <style type="text/css">  #show  {  color: Red;  }  #list  {  cursor: move;  width: 300px;  }  #list li  {  border: solid 1px yellow;  float: left;  list-style-type: none;  margin-top: 10px;  }  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>  <script type="text/javascript">  $(document).ready(function () {    //保存常用選擇器  var list = $("#list"); //ul  var show = $("#show"); //輸出提示  var orderlist = $("#orderlist"); //原順序  var check = $("#check"); //是否更新到數據庫    //保存原來的排列順序  var order = [];  list.children("li").each(function () {  order.push(this.title); //原排列順序保存在title,得到後更改title  $(this).attr("title", "你可以拖動進行排序");  });  orderlist.val(order.join());  //執行排列操作  list.sortable({  axis: 'y',//只能橫向拖動  opacity: 0.7,// 移動時的透明度  update: function () {//當排序動作結束時且元素坐標已經發生改變時觸發此事件。  Submit(check.attr("checked"));  }  });    //ajax更新  var Update = function (itemid, itemorder) {  $.ajax({  type: "post",  url: "update.aspx",  data: { id: itemid, order: orderlist.val() }, //id:新的排列對應的ID,order:原排列順序  beforeSend: function () {  show.html("正在更新");  },  success: function (req) {  if (req == "100") {  show.html("更新成功");  }  else if (req == "001") {  show.html("失敗,請稍後再試");  }  else {  show.html("參數不全");  }  }  });  };    //調用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("");  }  };        });  </script>  </head>    <body>  <form method="post" action="jquery-drag-order-sort.aspx" id="form1">  <div class="aspNetHidden">  <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2Q WAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBY CZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2Q WAm YPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL 2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" />  </div>    <span id="show"></span>  <h1>jQuery對元素拖動排序</h1>  <div>拖動時同時更新數據庫數據:<input type="checkbox" id="check" /></div>  <div>  <input type="hidden" id="orderlist" />  <ul id="list">    <li id="14" title="1">  <img alt="img" src="http://www.baidu.com/img/baidu_logo.gif" /></li>    <li id="13" title="2">  <img alt="img" src="http://www.google.com.hk/images/srpr/logo3w.png" /></li>    <li id="16" title="3">  <img alt="img" src="http://img3.cn.msn.com/images/0809/logo1.png" /></li>    </ul>  </div>  </form>  </body>  </html>   
copyright © 萬盛學電腦網 all rights reserved