对google个性主页的拖拽效果的js的完整注释－1

// 工具类，使用Util的命名空间，方便管理
var  Util  =   new  Object();
// 获取http header里面的UserAgent，浏览器信息
Util.getUserAgent  =  navigator.userAgent;
// 是否是Gecko核心的Browser，比如Mozila、Firefox
Util.isGecko  =  Util.getUserAgent.indexOf( " Gecko " )  !=   - 1 ;
// 是否是Opera
Util.isOpera  =  Util.getUserAgent.indexOf( " Opera " )  !=   - 1 ;
// 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft，false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子：http://www.jroller.com/page/dindin/?anchor=pro_java_12
Util.getOffset  =    (el, isLeft) {
     var  ret  =   0 ;
     while  (el  !=   null ) {
        ret  +=  el[ " offset "   +  (isLeft  ?   " Left "  :  " Top " )];
        el  =  el.offsetParent;
    }
     return  ret;
};
// 将一个（参数中的funcName是这个fuction的名字）绑定到一个element上，并且以这个element的上下文运行，其实是一种继承，这个可以google些文章看看
Util.bind  =    (el, fucName) {
     return    () {
         return  el[fucName].apply(el, arguments);
    };
};
// 重新计算所有的可以拖拽的element的坐标，对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标，防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff  =    (el) {
     for  ( var  i  =   0 ; i  <  Util.dragArray.length; i ++ ) {
         var  ele  =  Util.dragArray[i];
        ele.elm.pagePosLeft  =  Util.getOffset(ele.elm,  true );
        ele.elm.pagePosTop  =  Util.getOffset(ele.elm,  false );
    }
     var  nextSib  =  el.elm.nextSibling;
     while  (nextSib) {
        nextSib.pagePosTop  -=  el.elm.offsetHeight;
        nextSib  =  nextSib.nextSibling;
    }
};

// 隐藏Google Ig中间那个table，也就是拖拽的容器，配合show一般就是刷新用，解决一些浏览器的怪癖
Util.hide  =    () {
    Util.rootElement.style.display  =   " none " ;
};
// 显示Google Ig中间那个table，解释同上
Util.show  =    () {
    Util.rootElement.style.display  =   "" ;
};

// 移动时显示的占位虚线框
ghostElement  =   null ;
// 获取这个虚线框，通过dom动态生成
getGhostElement  =    () {
     if  ( ! ghostElement) {
        ghostElement  =  createElement( " DIV " );
        ghostElement.className  =   " modbox " ;
        ghostElement.backgroundColor  =   "" ;
        ghostElement.style.border  =   " 2px dashed #aaa " ;
        ghostElement.innerHTML  =   " &nbsp; " ;
    }
     return  ghostElement;
};