JS控制ul之间上下移动

Question

我使用ul实现了类似于层那种的数据列表效果，我现在想实现点击事件来改变成员的上下移动效果
或者说如何用JS实现列表框成员的上下移动效果呢
各位帮忙帮

Answer 1

+<SCRIPT>
function fnSwap(){
oList.children(0).swapNode(oList.children(1));
}
</SCRIPT>
<UL ID = oList>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
<LI>List Item 4
</UL>
<INPUT TYPE = button VALUE = "Swap List" onclick = "fnSwap()">

Answer 2

你这样只能实现前两个的交换，我如果想把List Item 1一直往下移动，直到和List Item 4交换呢

Answer 3

function swapNode(nodeD, nodeB) {
if (nodeD.swapNode) {
nodeD.swapNode(nodeB)
} else {
var E = nodeB.parentNode;
var C = nodeB.nextSibling;
if (C == nodeD) {
E.insertBefore(nodeD, nodeB)
} else {
if (nodeB == nodeD.nextSibling) {
E.insertBefore(nodeB, nodeD)
} else {
nodeD.parentNode.replaceChild(nodeB, nodeD);
E.insertBefore(nodeD, C)
}
}
}
}

Answer 4

<div class="bigCss">
<ul id="Ul1" class="str">
<li>书目列表1</li>
<li>书目列表2</li>
<li>书目列表3</li>
<li>书目列表4</li>
</ul>
<ul class="str" id="str1">
<LI>List Item 1</LI>
<LI>List Item 1</LI>
<LI>List Item 1</LI>
<LI>
   111
</LI>
<LI>   <img src="Images/1.gif" style="border:0px;" onclick="lastPage(1)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(1)" alt="下移"/></LI>
</UL>
<UL class="str" id="str2">
<LI>List Item 2</LI>
<LI>List Item 2</LI>
<LI>List Item 2</LI>
<LI>222
</LI>
<LI>
<img src="Images/1.gif" style="border:0px;" onclick="lastPage(2)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(2)" alt="下移"/>
</LI>
</UL>
<UL class="str" id="str3">
<LI>List Item 3</LI>
<LI>List Item 3</LI>
<LI>List Item 3</LI>
<LI>333</LI>
<LI>
<img src="Images/1.gif" style="border:0px;" onclick="lastPage(3)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(3)" alt="下移"/>
</LI>
</UL>
<UL class="str" id="str4">
<LI>List Item 4</LI>
<LI>List Item 4</LI>
<LI>List Item 4</LI>
<LI>4444</LI>
<LI>
<img src="Images/1.gif" style="border:0px;" onclick="lastPage(4)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(4)" alt="下移"/>
</LI>
</UL>
<UL class="str" id="str5">
<LI>List Item 5</LI>
<LI>List Item 5</LI>
<LI>List Item 5</LI>
<LI>5555</LI>
<LI><img src="Images/1.gif" style="border:0px;" onclick="lastPage(5)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(5)" alt="下移"/></LI>
</UL>
<UL class="str" id="str6">
<LI>List Item 6</LI>
<LI>List Item 6</LI>
<LI>List Item 6</LI>
<LI>666</LI>
<LI>
 <img src="Images/1.gif" style="border:0px;" onclick="lastPage(6)" alt="上移"/>
<img src="Images/2.gif" style="border:0px;" onclick="nextPage(6)" alt="下移"/>
</LI>
</UL></div>       <!----调用脚本----->
       <script type="text/javascript" src="JS/jquery-1.3.min.js"></script>
       <script type="text/javascript">
             function nextPage(page)
             {
                var temp;
                var last1="#str"+page;
                var next2="#str"+(parseInt(page)+1);
                if($(last1).children("li").length+1==page)
                {
                   alert("数据已移至末尾");
                } 
                else
                {    
                if($(last1).children("li").length==$(next2).children("li").length)
                    {
                       for(var j=0;j<$(last1).children("li").length-1;j++)
                       {
                          temp=$(last1).children("li").eq(j).html();
                          $(last1).children("li").eq(j).html($(next2).children("li").eq(j).html());
                          $(next2).children("li").eq(j).html(temp);
                       }
                    }
                }
             }   
             function lastPage(page)
             {
                var temp;
                var last1="#str"+page;
                var next2="#str"+(parseInt(page)-1);
                if(page==1)
                {
                   alert("数据已移至首部");
                } 
                else
                {    
                if($(last1).children("li").length==$(next2).children("li").length)
                    {
                       for(var j=0;j<$(last1).children("li").length-1;j++)
                       {
                          temp=$(last1).children("li").eq(j).html();
                          $(last1).children("li").eq(j).html($(next2).children("li").eq(j).html());
                          $(next2).children("li").eq(j).html(temp);
                       }
                    }
                }
             }
             
      </script>