這次帶給大家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;登入後複製
下邊，我們一步一步來實作這個功能。
<span id="show">
<p>
<input id="check" type="checkbox" />
</p>
<p>
<input type="hidden" id="orderlist" />
<ul id="list">
<asp:Repeater ID="rptOrder" runat="server">
<ItemTemplate>
<li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
<img alt="img" src="<%#Eval("Link") %>" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</p>登入後複製
有一個單選框，當使用者選取後，拖曳圖片時對資料庫中資料排序進行變更。隱藏域保存原來的圖片排列順序。 ul顯示圖片清單。
為了能看得過去，稍微加了點樣式：
var show = jQuery("#show"); //输出提示
var orderlist = jQuery("#orderlist"); //原顺序
var check = jQuery("#check"); //是否更新到数据库登入後複製
首先將常用的選擇器保存下來，這樣後邊呼叫就變得比較簡潔。這一部大家肯定沒有問題。 ^_^
//保存原来的排列顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(','));登入後複製
將原來的排列順序保存到隱藏域。這裡用到了陣列的push()方法，就是將ul每個li中的title(原來的排列順序)加入陣列。最後用join()方法，得到了原排列順序，回傳一個字串。現在排列順序格式為1,2,3 。
//ajax更新
var Update = function(itemid, itemorder) {
jQuery.ajax({
type: "post",
url: "update.aspx",
//id:新的排列对应的ID,order：原排列顺序
data: { id: itemid, order: orderlist.val() },
beforeSend: function() {
show.html("正在更新");
},
success: function() {
show.html("更新成功");
}
});
};登入後複製
接下來，將ajax更新區塊單獨分出來。這樣程序變得比較整潔，這塊沒有新東西。
//调用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("");
}
};登入後複製
和得到排列順序類似，將ID組成一個字串傳遞給了Update()方法。函數中的參數update為checkbox是否選取。
//执行排列操作
list.sortable({
opacity: 0.7,
update: function() {
Submit(check.attr("checked"));
}
});
}
</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">
<p class="aspNetHidden">
<input type="hidden" name="VIEWSTATE" id="VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" />
</p>
<span id="show"></span>
<h1>jQuery对元素拖动排序</h1>
<p>拖动时同时更新数据库数据：<input type="checkbox" id="check" /></p>
<p>
<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>
</p>
</form>
</body>
</html>登入後複製
最後，執行排列操作。後台部分就是現在ID對應原來排列順序的更新，相信大家並不陌生。
可以看出如果不進行資料庫操作，該外掛程式只需要呼叫sorttable便可完成對元素的拖曳。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
sortElements實作table排序步驟詳解
jquery實作表格排序即時搜尋功能
以上是jquery實作元素拖曳排序（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
