js实现按钮进行某行上移下移

最新推荐文章于 2023-10-07 16:10:34 发布

夏微凉秋微暖

最新推荐文章于 2023-10-07 16:10:34 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术

本文链接：https://blog.youkuaiyun.com/pengbin790000/article/details/76276357

前端技术专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现列表项上移、下移、置顶和置底功能的方法，并展示了如何通过AJAX保存列表项顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上个通用简单的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用js实现上移、下移、置顶、置底功能及源码案例</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>

样式如下：

以下是实际运用，包括移动后获取数据，每一行的顺序等等：

//获取数据后插入页面
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;
	  }
	 });


//保存数据
var putFlag = false; //避免重复提交
function saveData(){
	if(putFlag == true){
		$.dialog.tips('禁止重复提交！',3,'alert.gif',function(){});
		return false;
	}
	
	$("#num").val(a);//设置提交的数量
	var d=$.dialog.tips('正在执行，请稍候...',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后再加载数据
			setTimeout(function () { 
				dataLoad();
			}, 600);
			//d.close();
		}
	}) 
}