. 代碼如下:
<!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="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+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>