jquery對(duì)元素拖動(dòng)排序示例

2024-05-06 16:00:02

字體：大中小

供稿：網(wǎng)友

對(duì)元素進(jìn)行拖動(dòng)排序的實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery來完成這個(gè)工作，希望對(duì)大家有所幫助

復(fù)制代碼代碼如下:

<!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學(xué)習(xí)-jquery對(duì)元素拖動(dòng)排序</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"); //是否更新到數(shù)據(jù)庫(kù)

//保存原來的排列順序
var order = [];
list.children("li").each(function () {
order.push(this.title); //原排列順序保存在title，得到后更改title
$(this).attr("title", "你可以拖動(dòng)進(jìn)行排序");
});
orderlist.val(order.join());
//執(zhí)行排列操作
list.sortable({
axis: 'y',//只能橫向拖動(dòng)
opacity: 0.7,// 移動(dòng)時(shí)的透明度
update: function () {//當(dāng)排序動(dòng)作結(jié)束時(shí)且元素坐標(biāo)已經(jīng)發(fā)生改變時(shí)觸發(fā)此事件。
Submit(check.attr("checked"));
}
});

//ajax更新
var Update = function (itemid, itemorder) {
$.ajax({
type: "post",
url: "update.aspx",
data: { id: itemid, order: orderlist.val() }, //id:新的排列對(duì)應(yīng)的ID,order：原排列順序
beforeSend: function () {
show.html("正在更新");
},
success: function (req) {
if (req == "100") {
show.html("更新成功");
}
else if (req == "001") {
show.html("失敗，請(qǐng)稍后再試");
}
else {
show.html("參數(shù)不全");
}
}
});
};

//調(diào)用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">
<div>
<input type="hidden" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" />
</div>

<span></span>
<h1>jQuery對(duì)元素拖動(dòng)排序</h1>
<div>拖動(dòng)時(shí)同時(shí)更新數(shù)據(jù)庫(kù)數(shù)據(jù)：<input type="checkbox" /></div>
<div>
<input type="hidden" />
<ul>

<li /></li>

<li /></li>

<li /></li>

</ul>
</div>
</form>
</body>
</html>