JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

浏览数：35 / 时间：2015年06月11日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>JS移动li行数据，点击上移下移</title>
<style type="text/css">
   * {
       padding:0;
       margin:0;
   }
   .content {width:500px;margin:20px auto;}
   #pCon {width:500px;list-style:none;}
   #pCon li {height:20px;display:block;border-bottom:1px #ccc solid;}
   #pCon li a{margin-left:5px;text-decoration:none;}
   #pCon li a:hover{cursor:hand;}
   .context {float:left;display:inline;}
   .control {float:right;display:inline;}
   .control img {width:50px;height:12px;overflow:hidden;float:left;display:inline;}
       hr {margin:30px auto;}
        #pCon1 {width:500px;list-style:none;}
   #pCon1 li {height:20px;display:block;border-bottom:1px #ccc solid;}
   #pCon1 li a{margin-left:5px;text-decoration:none;}
   #pCon1 li a:hover{cursor:hand;}
</style>
</head>
<body>
<div class="content">

<ul id="pCon1">
<li id="id1"><div class="context">测试数据你相信么A</div></li>
<li id="id2"><div class="context">测试数据你相信么B</div></li>
<li id="id3"><div class="context">测试数据你相信么C</div></li>
</ul>
</div>
<script>
function moveSonU(tag,pc){
   var tagPre=get_previoussibling(tag);
        var t=document.getElementById(pc);
   if(tagPre!=undefined){
       t.insertBefore(tag,tagPre);
   }
}
function moveSonD(tag){
   var tagNext=get_nextsibling(tag);
   if(tagNext!=undefined){
       insertAfter(tag,tagNext);
   }
}
function get_previoussibling(n){
   if(n.previousSibling!=null){
       var x=n.previousSibling;
       while (x.nodeType!=1)
       {
           x=x.previousSibling;
       }
       return x;
   }
}
function get_nextsibling(n){
   if(n.nextSibling!=null){
       var x=n.nextSibling;
       while (x.nodeType!=1)
       {
           x=x.nextSibling;
       }
       return x;
   }
}
//DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){

    var parent = targetElement.parentNode;

    if (parent.lastChild == targetElement) {

        // 如果最后的节点是目标元素，则直接添加。因为默认是最后
        parent.appendChild(newElement);

    }

    else {

        parent.insertBefore(newElement, targetElement.nextSibling);

        //如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
    }

}

function myOrder(myList,m,mO,mT){
//myList为ul的id值，m为0显示文字，m为1显示图片，mO、mT为文字或图片内容
   var pCon=document.getElementById(myList);
   var pSon=pCon.getElementsByTagName("li");
   for(i=0;i<pSon.length;i++){
       var conTemp=document.createElement("div");
       conTemp.setAttribute("class","control");
       var clickUp=document.createElement("a");
       var clickDown=document.createElement("a");
       if(m==0){
       var upCon=document.createTextNode(mO);
       var downCon=document.createTextNode(mT);
       }else{
       var upCon=document.createElement("img");
       var downCon=document.createElement("img");
       upCon.setAttribute("src",mO);
       downCon.setAttribute("src",mT);
       }
       clickUp.appendChild(upCon);
       clickUp.setAttribute("href","#");
       clickDown.appendChild(downCon);
       clickDown.setAttribute("href","#");
       pSon[i].appendChild(conTemp);
       conTemp.appendChild(clickUp);
       conTemp.appendChild(clickDown);
       clickUp.onclick=function(){
           moveSonU(this.parentNode.parentNode,myList);
       }
       clickDown.onclick=function(){
           moveSonD(this.parentNode.parentNode);
       }
   }
}
myOrder("pCon1",0,"上移","下移");
</script>
</body>
</html>