两个ul标签中的li互相移动

最新推荐文章于 2022-05-11 10:45:02 发布

原创最新推荐文章于 2022-05-11 10:45:02 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #jquery #javascript #上下互换

HTML 同时被 3 个专栏收录

32 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

特效

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的示例，该示例展示了如何在两个列表之间移动列表项。通过构造JSON数据，并利用jQuery控制DOM元素，实现了列表项在两个不同列表间的交互式移动。

都是专业人员看的东西；废话不多说，直接上代码；

1、使用前请先引入jquery.js插件

CSS代码如下：

<style type="text/css">
.clearfix:before,.clearfix:after {content: " "; display: table; }
.clearfix:after {clear: both; }
.leftSide{width:300px;padding:10px;}
.leftSide .leftTop,
.leftSide .leftbotton{width:100%;clear:both;border:#dee5ec 1px solid;}
.leftSide .leftTop h2,
.leftSide .leftbotton h2{font-size: 16px; border-bottom: #dee5ec 1px solid; margin: 0 1px; line-height: 48px; padding-left: 15px; color: #000;}
.leftSide .leftbotton{margin-top:15px;}
.leftSide ul{list-style-type:none; padding:0px; }
.leftSide ul li{margin-bottom:5px;border-bottom:1px solid #fcfcfc;width:100%;display:block;clear: both;padding:5px;}
.leftSide ul li:before,.leftSide ul li:after {content: " "; display: table; }
.leftSide ul li:after {clear: both; }
.leftSide ul div{display:block;float:left;}
.leftSide ul div.btnCln{float:right;}
.leftSide ul div.btnCln .btn{background: #2890ff;border: #298df8 1px solid;color:#fff;font-size: 12px;width:45px;padding:3px 5px;}
</style>

构造前端HTML代码：

	<div class="leftSide">
		<div class="leftTop clearfix">
			<h2>字段属性</h2>
	  		<ul id="upUL">
	  		</ul>
		</div>
		<div class="leftbotton clearfix">
			<h2>字段属性</h2>
	  		<ul id="downUL"></ul>
		</div>
	</div>

构造JSON数据；使用JS控制容器事件

<script type="text/javascript">
	var djJson = [{ "id": "1", "Name": "流程启动", "Time": " 12:23", "Redact":"编辑" },
	{ "id": "2", "Name": "流程发布", "Time": "2:6", "Redact":"编辑" },
	{"id":"3","Name":"流程审批","Time":"4:0", "Redact":"编辑"},
	{"id":"4","Name":"并行网关","Time":"4:0", "Redact":"编辑"},
	{ "id": "5", "Name": "流程暂停", "Time": "5:8", "Redact":"编辑"}];
	$(function () {
		var $upUL = $("#upUL");
		var $downUL = $("#downUL");
		for (var i = 0; i < djJson.length; i++){//循环追加数据
			 $boxLi = $("<li id='" + djJson[i].id + "'><div>" + djJson[i].Name + "</div><div> &nbsp;&nbsp;使用时间" + djJson[i].Time + "</div><div class='btnCln'><a class='btn btn-primary'>" + djJson[i].Redact + "</a></div></li>");
			$upUL.append($boxLi);
		}
		$('.btn').click(function () {
			debugger
			if ($(this).parent().parent().parent().attr("id") == "upUL") {//通过判断父元素的ID来控制往哪个UL添加
				//alert('ID：' + $(this).parent().attr("id"));
				$(this).parent().parent().appendTo($downUL);
			}
			else {
				$(this).parent().parent().appendTo($upUL);
			}
		});
	});
</script>

完整全部代码如下：

<!DOCTYPE html>
<html>
<head>
<title>两个ul标签中的li互相移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
.clearfix:before,.clearfix:after {content: " "; display: table; }
.clearfix:after {clear: both; }
.leftSide{width:300px;padding:10px;}
.leftSide .leftTop,
.leftSide .leftbotton{width:100%;clear:both;border:#dee5ec 1px solid;}
.leftSide .leftTop h2,
.leftSide .leftbotton h2{font-size: 16px; border-bottom: #dee5ec 1px solid; margin: 0 1px; line-height: 48px; padding-left: 15px; color: #000;}
.leftSide .leftbotton{margin-top:15px;}
.leftSide ul{list-style-type:none; padding:0px; }
.leftSide ul li{margin-bottom:5px;border-bottom:1px solid #fcfcfc;width:100%;display:block;clear: both;padding:5px;}
.leftSide ul li:before,.leftSide ul li:after {content: " "; display: table; }
.leftSide ul li:after {clear: both; }
.leftSide ul div{display:block;float:left;}
.leftSide ul div.btnCln{float:right;}
.leftSide ul div.btnCln .btn{background: #2890ff;border: #298df8 1px solid;color:#fff;font-size: 12px;width:45px;padding:3px 5px;}
</style>
<script type="text/javascript">
	var djJson = [{ "id": "1", "Name": "流程启动", "Time": " 12:23", "Redact":"编辑" },
	{ "id": "2", "Name": "流程发布", "Time": "2:6", "Redact":"编辑" },
	{"id":"3","Name":"流程审批","Time":"4:0", "Redact":"编辑"},
	{"id":"4","Name":"并行网关","Time":"4:0", "Redact":"编辑"},
	{ "id": "5", "Name": "流程暂停", "Time": "5:8", "Redact":"编辑"}];
	$(function () {
		var $upUL = $("#upUL");
		var $downUL = $("#downUL");
		for (var i = 0; i < djJson.length; i++){//循环追加数据
			 $boxLi = $("<li id='" + djJson[i].id + "'><div>" + djJson[i].Name + "</div><div> &nbsp;&nbsp;使用时间" + djJson[i].Time + "</div><div class='btnCln'><a class='btn btn-primary'>" + djJson[i].Redact + "</a></div></li>");
			$upUL.append($boxLi);
		}
		$('.btn').click(function () {
			debugger
			if ($(this).parent().parent().parent().attr("id") == "upUL") {//通过判断父元素的ID来控制往哪个UL添加
				//alert('ID：' + $(this).parent().attr("id"));
				$(this).parent().parent().appendTo($downUL);
			}
			else {
				$(this).parent().parent().appendTo($upUL);
			}
		});
	});
</script>

	<div class="leftSide">
		<div class="leftTop clearfix">
			<h2>字段属性</h2>
	  		<ul id="upUL">
	  		</ul>
		</div>
		<div class="leftbotton clearfix">
			<h2>字段属性</h2>
	  		<ul id="downUL"></ul>
		</div>
	</div>

</body>
</html>