javascript 文章列表的拖拽排序,基于ul和li控件

source:

    function _bindevent(){
  //绑定事件
    var clis = $( "li.menubar");
    var dragli = null;
    var dragoverli = null;
    var cdiv = null;
    clis.bind({ 
   mousedown:function(){   
    if(dragli)if($( "div",dragli)[0])$( "div",dragli)[0].style.border = "0px";
    dragli = this;
    selectitem = dragli;
    dragli.style.border = "1px solid blue";
    dragli.style.cursor = "hand";  
    $( "div",this)[0].style.border = "1px solid silver";
    if(!cdiv)cdiv = $("<div></div"); 
    cdiv[0].style.width = 120;
    cdiv[0].style.height = 20;
    cdiv[0].style.color = "#993900";     
    cdiv[0].style.border = "1px solid blue";
    cdiv[0].style.position = "absolute";
    cdiv[0].style.zIndex = 999;
    cdiv[0].innerText = dragli.innerText;
    eeditor.appendChild( cdiv[0] );
   },
   mouseover:function(){
    dragoverli = this;
    if("1px solid blue"!=this.style.border)dragoverli.style.border = "1px solid green";
    if(dragli!=dragoverli)dragoverli.style.cursor = "hand";
    if(cdiv)cdiv[0].style.left = event.clientX + 10;
    if(cdiv)cdiv[0].style.top = event.clientY;
   },
   mouseout:function(){
    if(dragoverli)dragoverli.style.border = "0px";    
   },
   mouseup:function(){    
    if(dragli && dragoverli)if( dragli != dragoverli ){     
     dragli.swapNode( dragoverli );//精髓的swapNode 比网上那些拖拉拽强多了
     dragli.style.cursor = "default";     
     dragoverli.style.border = "0px";     
     dragoverli.style.cursor = "default";
     var cul = dragli.parentNode;     
    // _reorderconfigitems( cul ); 这个是对后台对象的重新排序    
    }
    if(cdiv)cdiv.remove();
   }
  });
 }