js上移、下移排序 效果 

<script type="text/javascript"><!--
google_ad_client = "pub-0849827290095392";
/* 728x90, 创建于 09-3-19 */
google_ad_slot = "6829013231";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><!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>myOrder</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;}
        /**
        <ul id="pCon">
        <li><div class="context">文字内容</div><div class="control"><a href="#">上移</a><a href="#">下移</a></div></li>
        </ul>
        **/
        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="pCon">
<li><div class="context">神马都是浮云A</div></li>
<li><div class="context">神马都是浮云B</div></li>
<li><div class="context">神马都是浮云C</div></li>
<li><div class="context">神马都是浮云D</div></li>
<li><div class="context">神马都是浮云E</div></li>
<li><div class="context">神马都是浮云F</div></li>
</ul>
<hr/>
<ul id="pCon1">
<li><div class="context">神马都是浮云A</div></li>
<li><div class="context">神马都是浮云B</div></li>
<li><div class="context">神马都是浮云C</div></li>
<li><div class="context">神马都是浮云D</div></li>
<li><div class="context">神马都是浮云E</div></li>
<li><div class="context">神马都是浮云F</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;
        }
}
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("pCon",1,"http://bbs.blueidea.com/images/smilies/default/rolleyes.gif","http://bbs.blueidea.com/images/smilies/default/han.gif");
myOrder("pCon1",0,"上移","下移");
</script>
</body>
</html>

 

posted @ 2012-04-22 19:36  天天笑一下  阅读(620)  评论(0)  编辑  收藏  举报