jquery实现左右列表项跳跃

最新推荐文章于 2020-03-11 17:24:38 发布

viser123

最新推荐文章于 2020-03-11 17:24:38 发布

阅读量461

点赞数

分类专栏： js 前端网页优化 Jquery 文章标签： jquery js web前端

本文链接：https://blog.csdn.net/viser123/article/details/51548055

版权

js 前端网页优化同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Jquery

7 篇文章 0 订阅

订阅专栏

这是有中间按钮的

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script>
<style>
body , ul , li , div {
margin: 0;
padding:0;
box-sizing: border-box;
}

body div {
width: 100px;
height: 200px;
border: 1px solid #666666;
margin: 5% 2%;
float: left;
}

ul {
width: 100px;
height: 200px;
text-align: center;
}

li {
margin:20% 2% ;
list-style: none;
/*border:1px solid #666666;*/
}

.box_center {
padding-left:1.5% ;
padding-top:.5% ;
}

.box_center span {
display: block;
width: 50px;
height: 15px;
text-align: center;
cursor: pointer;
margin: 34% 0;
}

.box_left ul .left_active {
color: red;
}

.box_right ul .right_active {
color: blue;
}
</style>
</head>
<body>
<div class="box_left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="box_center">
<span class="left"> > </span>
<span class="right"> < </span>
<span class="all_left"> >> </span>
<span class="all_right"> << </span>
</div>
<div class="box_right">
<ul>

</ul>
</div>
<script>
$(function(){
$(".box_left ul").delegate(" li","click",function(){
$(this).addClass("left_active");
});

$(".box_right ul").delegate("li","click",function(){
$(this).removeClass("left_active").addClass("right_active");
});

//双击事件
// $(".box_left ul").delegate(" li","dbclick",function(){
$(this).addClass("left_active");
// alert("111");
// });

//从左移到右单个移
$(".left").click(function(){
var l_str = $(".box_left ul").find(".left_active");
if(l_str.length < 1){
alert("请选择要移动的一项")
}
$(".box_left ul").find(".left_active").remove();
$(".box_right ul").append(l_str);
});

//从左到右全部
$(".all_left").click(function(){
var all_list = $(".box_left ul li");
if(all_list.length < 1){
alert("已经全部在右边")
}
$(".box_left ul li").remove();
$(".box_right ul").append(all_list);
});

//从右到左单个移
$(".right").click(function(){
var r_str = $(".box_right ul").find(".right_active");
if(r_str.length < 1){
alert("请选择要移动的一项")
}
$(".box_right ul").find(".right_active").remove();
$(".box_left ul").append(r_str);
});

//从左到左全部
$(".all_right").click(function(){
var all_list = $(".box_right ul li");
if(all_list.length < 1){
alert("已经全部在左边")
}
$(".box_right ul li").remove();
$(".box_left ul").append(all_list);
});
})
</script>
</body>

</html>

第二种是双击的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.left_box, .right_box {
width: 200px;
height: 300px;
border: 1px solid #666666;
float: left;
margin: 3% 3%;
}

ul li {
list-style: none;
margin: 16% 16%;
border: 1px solid #999999;
text-align: center;
}
</style>
</head>
<body>
<div class="left_box">
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
</div>
<div class="right_box">
<ul></ul>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function () {
//左边移到右边
$(".left_box").delegate("li", "dblclick", (function () {
$(this).addClass("active");
var l_left = $(".left_box ul").find(".active");
$(this).remove();
console.log(l_left);
$(".right_box ul").append(l_left);
$(".right_box ul li").removeClass("active")
})
);

//右边移到左边
$(".right_box").delegate("li", "dblclick", (function () {
console.log("1111");
$(this).addClass("active");
var r_left = $(".right_box ul").find(".active");
$(this).remove();
console.log(r_left);
$(".left_box ul").append(r_left);
$(".left_box ul li").removeClass("active");
})
);
})
</script>
</body>
</html>