<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box {
width: 800px;
border: 1px solid;
height: 600px;
padding: 40px;
margin: 100px auto;
text-align: center;
}
.box li {
border-bottom: 1px solid lightblue;
height: 50px;
line-height: 60px;
}
.f-left {
float: left;
}
.f-right {
float: right;
}
.left,.right {
width: calc(40% - 20 * 2px);
height: calc(100% - 40 * 2px);
border: 1px solid;
padding: 20px;
overflow: auto;
}
.main {
width: 19%;
height: 100%;
position: relative;
}
.main .btnBox {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.main .btnBox button {
width: 80px;
height: 30px;
border: 1px solid;
border-radius: 3px;
margin: 10px;
}
.active {
background-color: yellow;
}
.leftBtn,.rightBtn {
width: 70px;
height: 20px;
border: 1px solid;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="box">
<h1>左右互传</h1>
<div class="left f-left">
<h4>左边列表详情</h4>
<p style="overflow: hidden;"><button class="leftBtn f-left">全选</button></p>
<ul class="leftList">
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
<li>lfjlgjlfjllg</li>
</ul>
</div>
<div class="main f-left">
<div class="btnBox">
<p><button class="leftMove">左移</button></p>
<p><button class="rightMove">右移</button></p>
</div>
</div>
<div class="right f-right">
<h4>右边列表详情</h4>
<p style="overflow: hidden;"><button class="rightBtn f-right">全选</button></p>
<ul class="rightList">
</ul>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// 为元素添加自定义属性
$(".leftList li").attr("item","false");
$(".rightList li").attr("item","false");
$(".leftBtn").attr("data-check", "false")
$(".rightBtn").attr("data-check", "false")
// 左
$(".leftList li").click(function() {
if($(this).attr("item") == 'false') {
$(this).attr("item", "true").addClass("active");
}else if($(this).attr("item") == 'true') {
$(this).attr("item", "false").removeClass("active")
}
})
$(".leftMove").click(function() {
if($(".leftList li").length == 0) {
console.log("左边已经没有了")
return
}
var arr = [];
$(".leftList").find('li[item = "true"]').removeClass("active");
for (var i = 0; i < $(".leftList li").length; i++) {
if($(".leftList li")[i].getAttribute("item") == 'true') {
$(".leftList li")[i].setAttribute("item", "false")
arr.push($(".leftList li")[i])
}
}
for (var i = 0; i < arr.length; i++) {
$(".rightList").append(arr[i]);
}
})
$(".leftBtn").click(function() {
if($(this).attr("data-check") == 'false') {
$(".leftList li").attr("item", "true").addClass("active");
$(this).attr("data-check", "true")
}else if($(this).attr("data-check") == 'true') {
$(".leftList li").attr("item", "false").removeClass("active");
$(this).attr("data-check", "false")
}
})
// 右
$(".rightList li").click(function() {
if($(this).attr("item") == 'false') {
$(this).attr("item", "true").addClass("active");
}else if($(this).attr("item") == 'true') {
$(this).attr("item", "false").removeClass("active")
}
})
$(".rightMove").click(function() {
if($(".rightList li").length == 0) {
console.log("右边已经没有了")
return
}
var arr = [];
$(".rightList").find('li[item = "true"]').removeClass("active");
for (var i = 0; i < $(".rightList li").length; i++) {
if($(".rightList li")[i].getAttribute("item") == 'true') {
$(".rightList li")[i].setAttribute("item", "false")
arr.push($(".rightList li")[i])
}
}
for (var i = 0; i < arr.length; i++) {
$(".leftList").append(arr[i]);
}
})
$(".rightBtn").click(function() {
if($(".rightList li").length == 0) {
console.log("左边已经没有了")
}
if($(this).attr("data-check") == 'false') {
$(".rightList li").attr("item", "true").addClass("active");
$(this).attr("data-check", "true")
}else if($(this).attr("data-check") == 'true') {
$(".rightList li").attr("item", "false").removeClass("active");
$(this).attr("data-check", "false")
}
})
</script>
</body>
</html>