jquery对元素拖动排序示例
代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://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.x",
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="/wepdwujndc3mzmwnjm4d2qwagibd2qwagibdxychgtfiul0zw1db3vudaidfgzmd2qwamypfqmcmtqbmsdodhrwoi8vd3d3lmjhawr1lmnvbs9pbwcvymfpzhvfbg9nby5nawzkagepzbyczg8vawixmweyl2h0dha6ly93d3cuz29vz2xllmnvbs5oay9pbwfnzxm3jwci9sb2dvm3cucg5nzaicd2qwamypfqmcmtybmyxodhrwoi8vaw1nmy5jbi5tc24uy29tl2ltywdlcy8woda5l2xvz28xlnbuz2rkdx67fz2swhziujvfae+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=https://www.2cto.com/uploadfile/2018/0307/20180307100133463.gif" /></li>
<li id="13" title="2">
<img alt="img" src=https://www.2cto.com/uploadfile/2018/0307/20180307100133685.png" /></li>
<li id="16" title="3">
<img alt="img" src=https://www.2cto.com/uploadfile/2018/0307/20180307100133674.png" /></li>
</ul>
</p>
</form>
</body>
</html>