基于jquery实现左右上下移动效果

大佬教程收集整理的这篇文章主要介绍了基于jquery实现左右上下移动效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

最近再做报表时候，直接把全部字段都导出了，但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制，所以就尝试下咯。

js代码

//获取选中的值
}
//从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(""+vaTemp+"");//追加
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(""+objData[x]+"");
}
}
obj.append(""+buffer[y]+"");
}
}else{
for(var y = 0; y < buffer.length;y++)
{
obj.append(""+buffer[y]+"");
if(buffer[y]==temp.value)
{
for(var x = 0; x < objData.length; x++)
{
obj.append(""+objData[x]+"");
}
}
}
}
//选中值
obj.val(objData);
}
function findSelect(selects,objValue)
{
var number = -1;
for(var x = 0; x < selects.length; x++)
{
if(objValue==selects.get(x).value)
number = x;
}
return number;
}

大佬总结

以上是大佬教程为你收集整理的基于jquery实现左右上下移动效果全部内容，希望文章能够帮你解决基于jquery实现左右上下移动效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。