jquery实现左右列表项跳跃

原创 2016年05月31日 18:25:45


这是有中间按钮的

<!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之下拉框左右选择

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: class="centent"> select multip...
  • gwpJava
  • gwpJava
  • 2013年12月13日 17:16
  • 776

jquery追加列表项

$(document).ready(function() { $("#btn2").click(function() { $("ol").append("追加列表项"); ...
  • Ason_haiyu
  • Ason_haiyu
  • 2018年01月08日 11:23
  • 15

jq-ui的Sortable插件 两列布局 左右拖拽

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi1.先引入
  • u014665035
  • u014665035
  • 2016年08月30日 16:25
  • 1405

jquery ul li左右拖动

最近做影视的时候  遇到一个集数分集显示,类似下面的效果【用的jquery iscroll插件】 在手机端预览的时候可以左右拖动集数 效果如下 html: ...
  • u011650048
  • u011650048
  • 2015年07月22日 13:54
  • 1809

一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择使用jQuery完成下拉列表左右选择有这样一个需求,在(商品)分类的修改页面中,如下这样一个页面: 有某个分类下的所属的商品信息...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年07月06日 09:39
  • 890

jQuery 列表的修改和添加

昨天分享了删除操作,今天来总结一下添加和删除,略丑勿嫌 由于我一开始就将修改和添加共用一个弹框,这造成了我后面很多错误的产生,导致我的函数结构混乱,无数的嵌套与循环让我改了好久。 先来看代码吧...
  • watermelon_xi
  • watermelon_xi
  • 2016年12月13日 19:33
  • 742

点击左右横向滚动,很简单的代码哦

点击图片横向滚动 * { margin:0; padding:0;} body { font-size:12px;} #scrollab...
  • acongshijia
  • acongshijia
  • 2013年03月08日 16:44
  • 1765

jQuery实现左右滑动的toggle

我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。 slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元...
  • csdn_yudong
  • csdn_yudong
  • 2017年02月22日 17:19
  • 6398

jquery-ui 拖动列表 与 拖拽

一、列表拖动——Sortable Widget 代码: define(["jqueryUI","jquery"],function() { var dragInit = { initVi...
  • liuyuqin1991
  • liuyuqin1991
  • 2016年08月26日 11:28
  • 2258

jQuery带左右按钮控制图片切换

代码如下 带左右按钮控制图片切换jQuery幻灯片,jquery焦点图 #owl-demo{position:relative;width:640px;height:390px;marg...
  • wenzhilanyu2012
  • wenzhilanyu2012
  • 2015年09月05日 20:05
  • 1552
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现左右列表项跳跃
举报原因:
原因补充:

(最多只允许输入30个字)