對元素進行拖動排序的實現方法有很多，在本文為大家介紹下使用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>