<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用js實現(xiàn)上移、下移、置頂、置底功能及源碼案例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery-1.7.1.min.js"></script>
<style>
?.demo li{line-height: 30px;border-bottom: 1px solid #000;}
?.demo li a{padding: 0 20px;}
</style>
</head>
<body>
?
<ul id="addChildDiv">
?<li>001 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li>
?<li>002 <a href="#" class="up1">上移</a><a href="#" class="down">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li>
?<li>003 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li>
?<li>004 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li>
</ul>
<script>
?$("#addChildDiv").on('click', 'a', function(event) {
? event.preventDefault;
? var parent=$(this).parent();
? var parents=$(this).parents("#addChildDiv");
? var len=parents.children().length;
? if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){
? ?return false;
? }else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){
? ?return false;
? }
? switch (true) {
? ?case $(this).is(".up1"):
? ? var prev = parent.prev();
? ? parent.insertBefore(prev);
? ? break;
? ?case $(this).is(".down1"):
? ? var next = parent.next();
? ? parent.insertAfter(next);
? ? break;
? ?case $(this).is(".top1"):
? ? parents.prepend(parent);
? ? break;
? ?case $(this).is(".bottom1"):
? ? parents.append(parent);
? ? break;
? }
?});
</script>
</body>
</html>

樣式如下：

以下是實際運用，包括移動后獲取數(shù)據(jù)，每一行的順序等等：

//獲取數(shù)據(jù)后插入頁面
function getLine(){
?? ?var childAreaListSize = ${childAreaListSize };
?? ?var childAreaList = ${childAreaList };
?? ?for(var i=0;i<childAreaListSize;i++){
?? ??? ?++a;
?? ??? ?var tar = "<li>";
?? ??? ?tar += " <input type=\"hidden\" id=\"awId_" +a+ "\" name=\"awId_" +a+"\" value=\""+ childAreaList[i].id + "\" ?/>";
?? ??? ?
?? ??? ?tar += " <span style=\"color: red;\">*</span>";
?? ??? ?tar += " <span \">工程代碼：</span>";
?? ??? ?tar += " <input ?style=\"width:250px\" type=\"text\" id=\"awCode_" +a+ "\" name=\"awCode_" +a+"\" value=\""+ childAreaList[i].awCode + "\" ?maxlength=\"50\" readonly/>";
?? ??? ?
?? ??? ?
?? ??? ?tar += " <span style=\"color: red;\">*</span>";
?? ??? ?tar += " <span \">工程名稱：</span>";
?? ??? ?tar += " <input ?style=\"width:250px\" type=\"text\" id=\"awName_" +a+ "\" name=\"awName_" +a+"\" value=\""+ childAreaList[i].awName + "\" maxlength=\"50\" readonly/>";
?? ??? ?
?? ??? ?tar += " ?<a href=\"###\" class=\"top1\" \">置頂</a>";
?? ??? ?tar += " ?<a href=\"###\" class=\"up1\" \">上移</a>";
?? ??? ?tar += " ?<a href=\"###\" class=\"down1\" \">下移</a>";
?? ??? ?tar += " ?<a href=\"###\" class=\"bottom1\" \">置底</a>";
?? ??? ?tar += "</li>";
?? ??? ?
?? ??? ?
?? ??? ?$("#addChildDiv").append(tar);
?? ??? ?
?? ?}
?}
?
//排序
$("#addChildDiv").on('click', 'a', function(event) {
?? ? ?event.preventDefault;
?? ? ?var parent=$(this).parent();
?? ? ?var parents=$(this).parents("#addChildDiv");
?? ? ?var len=parents.children().length;
?? ? ?if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){
?? ? ? return false;
?? ? ?}else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){
?? ? ? return false;
?? ? ?}
?? ? ?switch (true) {
?? ? ? case $(this).is(".up1"):
?? ? ? ?var prev = parent.prev();
?? ? ? ?parent.insertBefore(prev);
?? ? ? ?break;
?? ? ? case $(this).is(".down1"):
?? ? ? ?var next = parent.next();
?? ? ? ?parent.insertAfter(next);
?? ? ? ?break;
?? ? ? case $(this).is(".top1"):
?? ? ? ?parents.prepend(parent);
?? ? ? ?break;
?? ? ? case $(this).is(".bottom1"):
?? ? ? ?parents.append(parent);
?? ? ? ?break;
?? ? ?}
?? ? });
?
?
//保存數(shù)據(jù)
var putFlag = false; //避免重復提交
function saveData(){
?? ?if(putFlag == true){
?? ??? ?$.dialog.tips('禁止重復提交！',3,'alert.gif',function(){});
?? ??? ?return false;
?? ?}
?? ?
?? ?$("#num").val(a);//設置提交的數(shù)量
?? ?var d=$.dialog.tips('正在執(zhí)行，請稍候...',600,'loading.gif');
?? ?
?? ?//var list=$("#addChildDiv li input[type='hidden']"); ?獲取id：addChildDiv下的li標簽的input標簽的hidden類型
?? ?var list = ",";
?? ?for (var i=0;i<a;i++){
?? ??? ?// 獲取id：addChildDiv下的第i的li標簽的input標簽的hidden類型
?? ??? ?var zzz = $("#addChildDiv").find("li:eq("+i+")").find("input[type='hidden']").val();
?? ??? ?list = list + zzz +","
?? ?}
?? ?
?? ?
?? ?//保存
?? ?putFlag = true;
?? ?$.ajax({
?? ??? ?type:'post',
?? ??? ?data:{"ids":list},
?? ??? ?url:'${root}/base/BaseAreaWorkSpace/orderChild.jspx?myId='+$("#myId").val(),
?? ??? ?async:false,
?? ??? ?dataType:"json",
?? ??? ?success:function(data){
?? ??? ??? ?putFlag = false;
?? ??? ??? ?$.dialog.tips(data.message,3,'alert.gif',function(){});
?? ??? ??? ?closePop();
?? ??? ??? ?//600ms后再加載數(shù)據(jù)
?? ??? ??? ?setTimeout(function () {?
?? ??? ??? ??? ?dataLoad();
?? ??? ??? ?}, 600);
?? ??? ??? ?//d.close();
?? ??? ?}
?? ?})?
}