一个可以上下移动栏目条的js代码，栏目条的位置顺序是保存在Cookie里，可以看懂整篇代码的请尽量添加注释给我。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test page</title>
<meta>
<style type="text/css">
/*<![CDATA[*/
ul{
  width:400px
}
li{
  border:1px solid gray;
  list-style:none
}
.txt{
  padding:4px;
  background-color:#ffffff
}
.title{
  font:bold 14px/20px verdana;
  position:absolute;
  top:0px;
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA
window.onload=function(){
  var g=ggGroup(document.getElementById('test'),5,true);
  //var a=g.serialize();
  //g.setup(a.reverse());
};
function ggGroup(ele,margin,useCookie){
  //////////
  //by mozart0, 2007.06.09
  //////////
  margin=margin||0;
  var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
  var txtUp='上移↑&nbsp;',txtDown='下移↓&nbsp;';
  var panels=children(ele);
  for(var i=0;i<panels.length;i++){
    var p=panels[i];
    p.style.position='absolute';
    p.style.width='100%';
    var b=document.createElement('div');
    with(b.style){
      fontSize='12px';
      lineHeight='20px';
      backgroundColor=bgcolors[i%bgcolors.length];
      textAlign='right';
    }
    b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>';
    b.firstChild.onclick=moveup;
    b.firstChild.style.cursor='pointer';
    b.lastChild.onclick=movedown;
    b.lastChild.style.cursor='pointer';
    p.insertBefore(b,p.firstChild);
  }
  var retObj={
    save:function(){
      setCookie('gg_'+ele.id,
        retObj.serialize().join(','),7*24);
      },
    load:function(){
      var a=getCookie('gg_'+ele.id);
      retObj.setup(a?a.split(','):null);
      },
    serialize:function(){
      for(var i=0,a=[],c=children(ele);i<c.length;i++)
        a.push(c[i].index);
      return a;
      },
    setup:function(a){
      var c=children(ele);
      if(a&&a.length==c.length){
        panels=new Array(c.length);
        for(var i=0;i<a.length;i++)
          panels[a[i]]=c[i];
        }
      for(var i=0,h=0,c=[];i<panels.length;i++){
        panels[i].style.top=h+'px';
        h+=panels[i].offsetHeight+margin;
        c.push(i);
        }
      check.apply(null,c);
      ele.style.height=h+'px';
      ele.style.position='relative';
      }
    };
  if(useCookie){
    retObj.load();
    window.attachEvent?
      window.attachEvent('onunload',retObj.save):
      window.addEventListener('unload',retObj.save,false);
    }
  else
    retObj.setup(null);
  return retObj;
  function setCookie(name,value,expires){ 
    var x=name+"="+escape(value); 
    if(expires){ 
      var d=new Date(); 
      d.setTime(d.getTime()+expires*24*3600*1000); 
      x+="; Expires="+d.toGMTString(); 
      } 
    document.cookie=x;
    } 
  function getCookie(name){ 
    var a=document.cookie.split("; "); 
    name+="="; 
    for(var i=0;i<a.length;i++) 
      if(a[i].indexOf(name)==0) 
        return unescape(a[i].substr(name.length)); 
    return ""; 
    }
  function check(){
    for(var i=0;i<arguments.length;i++){
      var x=arguments[i];
      var c=panels[x].firstChild.childNodes;
      c[0].style.display=x==0?'none':'';
      c[1].style.display=x==panels.length-1?'none':'';
      panels[x].index=x;
    }
  }
  function moveup(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index-1]);
  }
  function movedown(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index+1]);
  }
  function swap(p1,p2){
    var N=10;
    var INTV=200;
    var arr1,arr2;
    var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top);
    var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin;
    arr1=makeArr(t1,t1<t2?h2:-h2);
    arr2=makeArr(t2,t1<t2?-h1:h1);
    for(var i=0;i<N;i++)(function(){
      var j=i;
      setTimeout(function(){
        p1.style.top=arr1[j]+"px";
        p2.style.top=arr2[j]+"px";
        if(j==N-1){
          panels[p1.index]=p2;
          panels[p2.index]=p1;
          check(p1.index,p2.index);
        }
      },(j+1)*INTV/N);
    })();
    function makeArr(f,x){
      var ret=[];
      for(var i=0;i<N;i++)
        ret[i]=Math.round(f+i*x/(N-1));
      return ret;
    }
  }
  function children(e){
    var ret=[];
    for(var i=0,c=e.childNodes;i<c.length;i++)
      if(c[i].nodeType==1)
        ret.push(c[i]);
    return ret;
  }
}
//]]>
</script>
</head>
<body>
<ul id="test">
  <li>
    <div class="txt">
      <div class="title">Title A</div>
    </div></li>
  <li>
    <div class="txt">
      <div class="title">Title B</div>
    </div></li>
  <li>
    <div class="txt">
      <div class="title">Title C</div>
    </div></li>
</ul>
</body>
</html>

解决方案 »

  1.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>Test page </title> 
    <meta> 
    <style type="text/css"> 
    /* <![CDATA[*/ 
    ul{ 
      width:400px 
    } 
    li{ 
      border:1px solid gray; 
      list-style:none 
    } 
    .txt{ 
      padding:4px; 
      background-color:#ffffff 
    } 
    .title{ 
      font:bold 14px/20px verdana; 
      position:absolute; 
      top:0px; 
    } 
    /*]]>以上是风格样式*/ 
    </style> 
    <script language="javascript" type="text/javascript"> 
    // <![CDATA 
    window.onload=function(){ //进入页面时加载数据
      var g=ggGroup(document.getElementById('test'),5,true); 
      //var a=g.serialize(); 
      //g.setup(a.reverse()); 
    }; 
    function ggGroup(ele,margin,useCookie){ 
      ////////// 
      //by mozart0, 2007.06.09 
      ////////// 
      margin=margin||0; 
      var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); //背景
      var txtUp='上移↑&nbsp;',txtDown='下移↓&nbsp;'; //上移和下移文本
      var panels=children(ele); //字节点入队列
      for(var i=0;i <panels.length;i++){ //给字节点输入样式和图片和背景和大小
        var p=panels[i]; 
        p.style.position='absolute'; 
        p.style.width='100%'; 
        var b=document.createElement('div'); 
        with(b.style){ 
          fontSize='12px'; 
          lineHeight='20px'; 
          backgroundColor=bgcolors[i%bgcolors.length]; 
          textAlign='right'; 
        } 
        b.innerHTML=' <span>'+txtUp+' </span> <span>'+txtDown+' </span>'; 
        b.firstChild.onclick=moveup; 
        b.firstChild.style.cursor='pointer'; 
        b.lastChild.onclick=movedown; 
        b.lastChild.style.cursor='pointer'; 
        p.insertBefore(b,p.firstChild); 
      } 
      var retObj={ 
        save:function(){ //数据保存到cookie里
          setCookie('gg_'+ele.id, 
            retObj.serialize().join(','),7*24); 
          }, 
        load:function(){ //加载cookie数据
          var a=getCookie('gg_'+ele.id); 
          retObj.setup(a?a.split(','):null); 
          }, 
        serialize:function(){ //把字节点数据推入a
          for(var i=0,a=[],c=children(ele);i <c.length;i++) 
            a.push(c[i].index); 
          return a; 
          }, 
        setup:function(a){ //格式化ele
          var c=children(ele); 
          if(a&&a.length==c.length){ 
            panels=new Array(c.length); 
            for(var i=0;i <a.length;i++) 
              panels[a[i]]=c[i]; 
            } 
          for(var i=0,h=0,c=[];i <panels.length;i++){ 
            panels[i].style.top=h+'px'; 
            h+=panels[i].offsetHeight+margin; 
            c.push(i); 
            } 
          check.apply(null,c); 
          ele.style.height=h+'px'; 
          ele.style.position='relative'; 
          } 
        }; 
      if(useCookie){ //cookie有数据就加载数据
        retObj.load(); 
        window.attachEvent? 
          window.attachEvent('onunload',retObj.save): 
          window.addEventListener('unload',retObj.save,false); 
        } 
      else //否则按装空数据
        retObj.setup(null); 
      return retObj; 
      function setCookie(name,value,expires){ //数据载入cookie
        var x=name+"="+escape(value); 
        if(expires){ 
          var d=new Date(); 
          d.setTime(d.getTime()+expires*24*3600*1000); 
          x+="; Expires="+d.toGMTString(); 
          } 
        document.cookie=x; 
        } 
      function getCookie(name){ //得到cookie
        var a=document.cookie.split("; "); 
        name+="="; 
        for(var i=0;i <a.length;i++) 
          if(a[i].indexOf(name)==0) 
            return unescape(a[i].substr(name.length)); 
        return ""; 
        } 
      function check(){ //检查样式
        for(var i=0;i <arguments.length;i++){ 
          var x=arguments[i]; 
          var c=panels[x].firstChild.childNodes; 
          c[0].style.display=x==0?'none':''; 
          c[1].style.display=x==panels.length-1?'none':''; 
          panels[x].index=x; 
        } 
      } 
      function moveup(evt){ //向上移动数据
        var p=evt?evt.target:event.srcElement; 
        p=p.parentNode.parentNode; 
        swap(p,panels[p.index-1]); 
      } 
      function movedown(evt){ //向下移动数据 
        var p=evt?evt.target:event.srcElement; 
        p=p.parentNode.parentNode; 
        swap(p,panels[p.index+1]); 
      } 
      function swap(p1,p2){ //交换数据
        var N=10; 
        var INTV=200; 
        var arr1,arr2; 
        var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); 
        var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; 
        arr1=makeArr(t1,t1 <t2?h2:-h2); 
        arr2=makeArr(t2,t1 <t2?-h1:h1); 
        for(var i=0;i <N;i++)(function(){ 
          var j=i; 
          setTimeout(function(){ 
            p1.style.top=arr1[j]+"px"; 
            p2.style.top=arr2[j]+"px"; 
            if(j==N-1){ 
              panels[p1.index]=p2; 
              panels[p2.index]=p1; 
              check(p1.index,p2.index); 
            } 
          },(j+1)*INTV/N); 
        })(); 
        function makeArr(f,x){ 
          var ret=[]; 
          for(var i=0;i <N;i++) 
            ret[i]=Math.round(f+i*x/(N-1)); 
          return ret; 
        } 
      } 
      function children(e){ 
        var ret=[]; 
        for(var i=0,c=e.childNodes;i <c.length;i++) 
          if(c[i].nodeType==1) 
            ret.push(c[i]); 
        return ret; 
      } 
    } 
    //]]> 
    </script> 
    </head> 
    <body> 
    <ul id="test"> 
      <li> 
        <div class="txt"> 
          <div class="title">Title A </div> 
        </div> </li> 
      <li> 
        <div class="txt"> 
          <div class="title">Title B </div> 
        </div> </li> 
      <li> 
        <div class="txt"> 
          <div class="title">Title C </div> 
        </div> </li> 
    </ul> 
    </body> 
    </html>