jquery实现元素平面移动

PHP中文网 • 2025年3月8日 09:40:23 • 编程技术 • 阅读 2

这次给大家带来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(""+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)  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; }

登录后复制

页面调用

   
    未导出字段   
            姓名     快件号     快递公司     首重     续重       
  
     
   <input type="button" value="<  
      >" onclick="Shift('right')"/>  
  
     
    需导出字段   
            首价     续价     大大     小小