jquery实现左右列表项跳跃
来源:互联网 发布:数据库访问控制技术 编辑:程序博客网 时间:2024/06/05 20:46
这是有中间按钮的
<!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>
- jquery实现左右列表项跳跃
- jquery 实现左右下拉列表 选项 移动
- jQuery 实现左右Select列表数据互换
- jquery 实现左右选择
- RecycleView 实现左右列表并排
- 用jQuery实现multiple select(列表框)左右添加和删除功能
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
- jquery实现左右上下移动
- jquery实现左右选择框
- jQuery实现div左右滑动
- js实现左右列表内容交换传递
- dhtmlxgrid实现左右列表数据移动
- 使用swipemenulistview实现列表的左右滑动
- 使用swipemenulistview实现列表的左右滑动
- Fragment实现左右新闻列表和详情
- 使用swipemenulistview实现列表的左右滑动
- 下拉列表的左右选择的实现
- SkipList->跳跃列表
- 信号量、互斥锁
- 如何求最大质因数?
- swift2.0 学习笔记Eleven
- JavaScript获取表格的行数和列数
- DES 加密时候的内存泄露
- jquery实现左右列表项跳跃
- HTTP协议简析
- C语言指针数组和数组指针[转]
- ThinkPHP实现支付宝接口功能
- td的宽度设置
- 一位女程序员的奋斗路程
- study《NodeJS安装及NPM设置》
- 数据库相关内容
- 分数类的运算符重载(1)