swapNode is not a function ! 穿梭框左右上下移动

最新推荐文章于 2023-08-25 17:21:14 发布

大志强

最新推荐文章于 2023-08-25 17:21:14 发布

阅读量796

点赞数

分类专栏：小小的天，组成大大的梦想文章标签：穿梭框 swapNode not a function 左右移动

小小的天，组成大大的梦想专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原文链接：http://www.360doc.com/content/09/0624/15/16915_4017252.shtml

修改内容，添加以下方法

Node.prototype.swapNode=function($target){
    var $targetParent=$target.parentNode;
    var $targetNextSibling=$target.nextSibling;
    var $thisNode=this.parentNode.replaceChild($target,this);
    $targetNextSibling?$targetParent.insertBefore($thisNode,$targetNextSibling):$targetParent.appendChild($thisNode);
    return this;
}

解决非IE swapNode不能用，不能用穿梭框的问题，效果如下：

问题根源在此： http://www.w3help.org/zh-cn/causes/BT9032

<SCRIPT language="javascript">  
 /*************************************************************************************************************** 
  * 文 件 名：selectListTools.js  
  * 文件描述：关于list列表框的一些工具方法 
  * 主要方法： 
  *          1， moveUp(oSelect,isToTop) －－－－－－－－－－－－ 向上移动一个list列表框的选中项目， 
  *                                                                可以支持多选移动，可以设置是否移动到顶层 
  *          2， moveDown(oSelect,isToBottom)－－－－－－－－－－ 向下移动一个list列表框的选中项目， 
  *                                                                可以支持多选移动，可以设置是否移动到底层 
  *          3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在两个列表框之间转移数据 
  *          4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 转移两个列表框之间的全部数据 
  *          5， deleteSelectItem(oSelect) －－－－－－－－－－－ 删除所选的项目 
  *  
 ****************************************************************************************************************/  
    
 /** 
  * 使选中的项目上移 
  * 
  * oSelect: 源列表框 
  * isToTop: 是否移至选择项到顶端，其它依次下移， 
  *          true为移动到顶端，false反之，默认为false 
  */  
 function moveUp(oSelect,isToTop)  
 {  
     //默认状态不是移动到顶端  
     if(isToTop == null)  
         var isToTop = false;  
           
     //如果是多选------------------------------------------------------------------  
     if(oSelect.multiple)  
     {  
         for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)  
         {  
             //如果设置了移动到顶端标志  
             if(isToTop)  
             {  
                 if(oSelect.options[selIndex].selected)  
                 {  
                     var transferIndex = selIndex;  
                     while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)  
                     {  
                         oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);  
                         transferIndex --;  
                     }  
                 }  
             }  
             //没有设置移动到顶端标志  
             else  
             {  
                 if(oSelect.options[selIndex].selected)  
                 {  
                     if(selIndex > 0)  
                     {  
                         if(!oSelect.options[selIndex - 1].selected)  
                             oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
                     }  
                 }  
             }  
         }  
     }  
     //如果是单选--------------------------------------------------------------------  
     else  
     {  
         var selIndex = oSelect.selectedIndex;  
         if(selIndex <= 0)  
             return;  
         //如果设置了移动到顶端标志  
         if(isToTop)  
         {  
             while(selIndex > 0)  
             {  
                 oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
                 selIndex --;  
             }  
         }  
         //没有设置移动到顶端标志  
         else          
             oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
     }  
 }  
/** 
  * 使选中的项目下移 
  * 
  * oSelect: 源列表框 
  * isToTop: 是否移至选择项到底端，其它依次上移， 
  *          true为移动到底端，false反之，默认为false 
  */  
 function moveDown(oSelect,isToBottom)  
 {  
     //默认状态不是移动到顶端  
     if(isToBottom == null)  
         var isToBottom = false;  
           
     var selLength = oSelect.options.length - 1;  
       
     //如果是多选------------------------------------------------------------------  
     if(oSelect.multiple)  
     {  
         for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)  
         {  
             //如果设置了移动到顶端标志  
             if(isToBottom)  
             {  
                 if(oSelect.options[selIndex].selected)  
                 {  
                     var transferIndex = selIndex;  
                     while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)  
                     {  
                         oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);  
                         transferIndex ++;  
                     }  
                 }  
             }  
             //没有设置移动到顶端标志  
             else  
             {  
                 if(oSelect.options[selIndex].selected)  
                 {  
                     if(selIndex < selLength)  
                     {  
                         if(!oSelect.options[selIndex + 1].selected)  
                             oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
                     }  
                 }  
             }  
         }  
     }  
     //如果是单选--------------------------------------------------------------------  
     else  
     {  
         var selIndex = oSelect.selectedIndex;  
         if(selIndex >= selLength - 1)  
             return;  
         //如果设置了移动到顶端标志  
         if(isToBottom)  
         {  
             while(selIndex < selLength - 1)  
             {  
                 oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
                 selIndex ++;  
             }  
         }  
         //没有设置移动到顶端标志  
         else          
             oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
     }  
 }  
/** 
  * 移动select的部分内容,必须存在value，此函数以value为标准进行移动 
  * 
  * oSourceSel: 源列表框对象  
  * oTargetSel: 目的列表框对象 
  */  
 function moveSelected(oSourceSel,oTargetSel)  
 {  
     //建立存储value和text的缓存数组  
     var arrSelValue = new Array();  
     var arrSelText = new Array();  
     //此数组存贮选中的options，以value来对应  
     var arrValueTextRelation = new Array();  
     var index = 0;//用来辅助建立缓存数组  
       
     //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系  
     for(var i=0; i<oSourceSel.options.length; i++)  
     {  
         if(oSourceSel.options[i].selected)  
         {  
             //存储  
             arrSelValue[index] = oSourceSel.options[i].value;  
             arrSelText[index] = oSourceSel.options[i].text;  
             //建立value和选中option的对应关系  
             arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];  
             index ++;  
         }  
     }  
       
     //增加缓存的数据到目的列表框中，并删除源列表框中的对应项  
     for(var i=0; i<arrSelText.length; i++)    
     {  
         //增加  
         var oOption = document.createElement("option");  
         oOption.text = arrSelText[i];  
         oOption.value = arrSelValue[i];  
         oTargetSel.add(oOption);  
         //删除源列表框中的对应项  
         oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);  
     }  
 }  
/** 
  * 移动select的整块内容 
  * 
  * oSourceSel: 源列表框对象  
  * oTargetSel: 目的列表框对象 
  */  
 function moveAll(oSourceSel,oTargetSel)  
 {  
     //建立存储value和text的缓存数组  
     var arrSelValue = new Array();  
     var arrSelText = new Array();  
       
     //存储所有源列表框数据到缓存数组  
     for(var i=0; i<oSourceSel.options.length; i++)  
     {  
         arrSelValue[i] = oSourceSel.options[i].value;  
         arrSelText[i] = oSourceSel.options[i].text;  
     }  
       
     //将缓存数组的数据增加到目的select中  
     for(var i=0; i<arrSelText.length; i++)    
     {  
         var oOption = document.createElement("option");  
         oOption.text = arrSelText[i];  
         oOption.value = arrSelValue[i];  
         oTargetSel.add(oOption);  
     }  
       
     //清空源列表框数据，完成移动  
     oSourceSel.innerHTML = "";  
 }  
/** 
  * 删除选定项目 
  * 
  * oSelect: 源列表框对象  
  */  
 function deleteSelectItem(oSelect)  
 {  
     for(var i=0; i<oSelect.options.length; i++)  
     {  
         if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)  
         {  
             oSelect.options[i] = null;  
             i --;  
         }  
     }  
 } 
Node.prototype.swapNode=function($target){
    var $targetParent=$target.parentNode;
    var $targetNextSibling=$target.nextSibling;
    var $thisNode=this.parentNode.replaceChild($target,this);
    $targetNextSibling?$targetParent.insertBefore($thisNode,$targetNextSibling):$targetParent.appendChild($thisNode);
    return this;
  } 
//js文件完毕  
 </SCRIPT>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
 <BODY style="font-size:12px" mce_style="font-size:12px">  
 <FORM name="form1" method="post" action="">  
   <SELECT name="left" size="10" id="select" multiple style="width:100px; ">  
     <OPTION value="aaaaa">aaaaa</OPTION>  
     <OPTION value="bbbbb">bbbbb</OPTION>  
     <OPTION value="ccccc">ccccc</OPTION>  
   </SELECT>  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">  
   <SELECT name="right" size="10" id="select" multiple style="width:100px; ">  
     <OPTION value="ddddd">ddddd</OPTION>  
     <OPTION value="eeeee">eeeee</OPTION>  
     <OPTION value="fffff">fffff</OPTION>  
     <OPTION value="ggggg">ggggg</OPTION>  
     <OPTION value="hhhhh">hhhhh</OPTION>  
     <OPTION value="iiiii">iiiii</OPTION>  
   </SELECT>  
   <br><br><br><br>  
   <DIV style="background-color:#CCCCCC;padding:2px" mce_style="background-color:#CCCCCC;padding:2px">  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="上移到顶"   
 onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">  
   <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="下移到顶"   
 onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);">  （支持多选移动）  
   </DIV>  
   <BR><BR>  
   <DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative">  
   右移：<INPUT type="radio" name="ifAll" value="right" checked> <br>  
   左移：<INPUT type="radio" name="ifAll" value="left"><br><br>  
   <INPUT type="button" value="移动全部" style="border:1px solid black " mce_style="border:1px solid black " onClick="judgeMove()">   
   </DIV>  
   <br><br>  
   <DIV style="background-color:#CCCCCC; padding:5px" mce_style="background-color:#CCCCCC; padding:5px">  
       <INPUT type="button" value=" 删 除 " style="border:1px solid black " mce_style="border:1px solid black "   
 onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">  
   </div>  
 </FORM>  
 </BODY>  
 <SCRIPT language="javascript">  
 function judgeMove()  
 {  
     var arrRadio = document.all.ifAll;  
     var valOfRadio;  
     for(var i=0; i<arrRadio.length; i++)  
     {  
         if(arrRadio[i].checked)  
         {  
             valOfRadio = arrRadio[i].value;  
             break;  
         }  
     }  
     if(valOfRadio == "left")  
         moveAll(document.all.right,document.all.left);  
     if(valOfRadio == "right")  
         moveAll(document.all.left,document.all.right);  
 }  
 </SCRIPT>

大志强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swapNode is not a function ! 穿梭框左右上下移动

原文链接：http://www.360doc.com/content/09/0624/15/16915_4017252.shtml修改内容，添加以下方法Node.prototype.swapNode=function($target){ var $targetParent=$target.parentNode; var $targetNextSibling=$targ...
复制链接

扫一扫