jquery点击左边移到右边，上移，下移，置顶，置底排序小插件
Posted xxger前端学习
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击左边移到右边，上移，下移，置顶，置底排序小插件相关的知识，希望对你有一定的参考价值。
工作中，我们有时候会遇到有点击将左边内容移动到右边，进行排序的小插件，今天就来模仿写一下。效果图如下：
按照惯例，依然直接上结构，样式代码就不展示啦~~
<div class="move-wrap">
<div class="move-box" id="moveBox1">
<div class="icon-box">
<input type="button" value="置顶" class="top">
<input type="button" value="上移" class="up">
<input type="button" value="下移" class="down">
<input type="button" value="置底" class="bottom">
</div>
<div class="select-box">
<ul class="sel"><li><input type="checkbox" class="select-all">全选</li><li><input type="checkbox" class="select-no">反选</li></ul>
<ul class="option-box" id="optionBox1">
<li><input type="checkbox">选项1</li>
<li><input type="checkbox">选项2</li>
<li><input type="checkbox">选项3</li>
<li><input type="checkbox">选项4</li>
<li><input type="checkbox">选项5</li>
<li><input type="checkbox">选项6</li>
<li><input type="checkbox">选项7</li>
<li><input type="checkbox">选项8</li>
</ul>
</div>
</div>
<div class="move-center">
<input type="button" class="right" value=">>">
<input type="button" class="left" value="<<">
</div>
<div class="move-box" id="moveBox2">
<div class="select-box">
<ul class="sel"><li><input type="checkbox" class="select-all">全选</li><li><input type="checkbox" class="select-no">反选</li></ul>
<div class="option-box" id="optionBox2">
<li><input type="checkbox">选项9</li>
<li><input type="checkbox">选项10</li>
<li><input type="checkbox">选项11</li>
<li><input type="checkbox">选项12</li>
<li><input type="checkbox">选项13</li>
<li><input type="checkbox">选项14</li>
<li><input type="checkbox">选项15</li>
<li><input type="checkbox">选项16</li>
</div>
</div>
<div class="icon-box">
<input type="button" value="置顶" class="top">
<input type="button" value="上移" class="up">
<input type="button" value="下移" class="down">
<input type="button" value="置底" class="bottom">
</div>
</div>
</div>
然后是jquery脚本代码：
<script>
$(function(){
//全选、全不选
//版本较高的jquery可以使用prop()方法，一般html元素本身自带的固有属性用prop()方法，我们自定义的DOM属性用attr()方法
$('.select-all').on('click',function(){
var a = $(this).parents('.sel').next('.option-box').find('input');
if($(this).is(':checked')){
a.prop('checked',true);
}else{
a.prop('checked',false);
}
});
//反选
$('.select-no').on('click',function(){
var b = $(this).parents('.sel').next('.option-box').find('input');
b.each(function(){
$(this).prop('checked',!$(this).prop('checked'));
})
});
//右移
$('.right').on('click',function(){
$('#optionBox1 input:checked').parent().appendTo('#optionBox2');
});
//左移
$('.left').on('click',function(){
$('#optionBox2 input:checked').parent().appendTo('#optionBox1');
});
//上移
$('#moveBox1 .up').on('click',function(){
$.each($('#optionBox1 input:checked'), function(){
var onthis = $(this).parent();
onthis.prev().before(onthis);
});
});
$('#moveBox2 .up').on('click',function(){
$.each($('#optionBox2 input:checked'), function(){
var onthis = $(this).parent();
onthis.prev().before(onthis);
});
});
//下移
// 下移不能像上移一样用以下这个思路,会导致当多选为连续两个选项时,点击下移不起作用.
// var onthis = $(this).parent();
// onthis.next().after(onthis);
$('#moveBox1 .down').on('click',function(){
//jQuery.makeArray()将一个类数组对象转换成真正的数组对象
//reverse()将数组中的元素倒序排列
var reverseChecked = jQuery.makeArray($("#optionBox1 input:checked")).reverse();
$.each(reverseChecked,function(){
var checkedLab = $(this).parent();
var downLab = checkedLab.next();
checkedLab.insertAfter(downLab);
});
});
$('#moveBox2 .down').on('click',function(){
var reverseChecked = jQuery.makeArray($("#optionBox2 input:checked")).reverse();
$.each(reverseChecked,function(){
var checkedLab = $(this).parent();
var downLab = checkedLab.next();
checkedLab.insertAfter(downLab);
});
});
//置顶
$('#moveBox1 .top').on('click',function(){
$.each($('#optionBox1 input:checked'), function(){
var onthis = $(this).parent();
$('#optionBox1').prepend(onthis);
});
});
$('#moveBox2 .top').on('click',function(){
$.each($('#optionBox2 input:checked'), function(){
var onthis = $(this).parent();
$('#optionBox2').prepend(onthis);
});
});
//置底
$('#moveBox1 .bottom').on('click',function(){
$.each($('#optionBox1 input:checked'), function(){
var onthis = $(this).parent();
onthis.appendTo('#optionBox1');
});
});
$('#moveBox2 .bottom').on('click',function(){
$.each($('#optionBox2 input:checked'), function(){
var onthis = $(this).parent();
onthis.appendTo('#optionBox2');
});
});
});
</script>
以上是关于jquery点击左边移到右边，上移，下移，置顶，置底排序小插件的主要内容，如果未能解决你的问题，请参考以下文章