这次给大家带来怎样使用jquery实现左右上下移动功能，使用jquery实现左右上下移动功能的注意事项有哪些，下面就是实战案例，一起来看一下。
最近再做报表时候，直接把全部字段都导出了，但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制，所以就尝试下咯。
js代码
function selected(thiz)
{
var name = thiz.name;
if(name==right)
$(select[name='left']).val();
else
$(select[name='right']).val();
}
function shift(thiz)
{
var right = $(select[name='right']);
var left = $(select[name='left']);
if(thiz==left && right.val() != ){
lrshift(right,left);
}else if(thiz==right && left.val() != ){
lrshift(left,right);
}
//获取选中的值
}
//从dest移动到target
function lrshift(dest,target)
{
var childrens = dest.children();
var args = ;
//alert(dest.val());
var dests = dest.val()
for(var x = 0; x < dests.length; x++)
{
var vatemp = dests[x];
target.append("<option value='"+vatemp+"'>+vatemp+</option>);//追加
target.find(option[value='+vatemp+']).attr(selected,true);//给追加获取焦点
for(var y = 0; y <childrens.length;y++ )//删除选中的元素
{
if(childrens.get(y).value==vatemp)
$(childrens.get(y)).remove();
}
}
dest.val("");
}
function shiftvalue(address)
{
var right = $("select[name='right']");
var left = $("select[name='left']");
if(right.val()!=null)
shift(right,address);
else if(left.val()!=null)
shift(left,address);
}
function shift(obj,address){
//获取选中的值
var objdata = obj.val();
var childrens = obj.children();
var strs = "";
for(var x = 0; x < objdata.length; x++)
{
strs+="@"+objdata[x];
}
//获取要添加位置对象
var temp = null;
if(address=="top"){
var number = findselect(childrens,objdata[0]);
if((--number) < 0)
return;
temp = childrens.get(number);
}
else{
var number = findselect(childrens,objdata[objdata.length-1]);
if((++number) > childrens.length-1)
return;
temp = childrens.get(number);
}
//删除选中的值
var n = 0;
var buffer = new array(childrens.length-objdata.length);
for(var x = 0; x < childrens.length;x++)
{
var value = childrens.get(x).value;
if(strs.indexof(value)==-1)
buffer[n++] = value;
}
//添加新排序的值
obj.empty();
if(address=="top")
{
for(var y = 0; y < buffer.length;y++)
{
if(buffer[y]==temp.value)
{
for(var x = 0; x < objdata.length ; x++)
{
obj.append("<option>+objdata[x]+</option>);
}
}
obj.append(<option>+buffer[y]+</option>);
}
}else{
for(var y = 0; y
</p>
</p>
<p style="margin-top:-20px;">
<p style="margin-left:22%;">
<b>需导出字段</b>
</p>
<p style="float:left;">
<select name="right" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;">
<option value="首价">首价</option>
<option value="续价">续价</option>
<option value="大大">大大</option>
<option value="小小">小小</option>
</select>
</p>
</p>
<p style="float:left;">
<p style="margin:30px;margin-top:110px;">
<input type="button" value="向上" onclick="shiftvalue('top')" />
</p>
<p style="margin:30px;margin-top:30px;">
<input type="button" value="向下" onclick="shiftvalue('bottom')" />
</p>
</p>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue ssr 组件加载
vue.js内侦听器使用案例解析
以上就是怎样使用jquery实现左右上下移动功能的详细内容。