关闭

jquery实现左右列表项跳跃

标签: jqueryjs web前端
98人阅读 评论(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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7368次
    • 积分:381
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:4篇
    • 译文:4篇
    • 评论:1条
    最新评论