都是专业人员看的东西;废话不多说,直接上代码;
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> 使用时间" + 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> 使用时间" + 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>