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

// 可拖拽Element的原形，用来将event绑定到各个钩子，这部分市比较通用的，netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个，也会帮助理解，http://www.jroller.com/page/dindin/?anchor=pro_java_12
var Drag = {
     // 对这个element的引用，一次只能拖拽一个Element
    obj: null ,
     // element是被拖拽的对象的引用，elementHeader就是鼠标可以拖拽的区域
    init: (elementHeader, element) {
         // 将start绑定到down事件，按下鼠标触发start
        elementHeader.down = Drag.start;
         // 将element存到header的obj里面，方便header拖拽的时候引用
        elementHeader.obj = element;
         // 初始化绝对的坐标，因为不是position=absolute所以不会起什么作用，但是防止后面onDrag的时候parse出错了
         if (isNaN(parseInt(element.style.left))) {
            element.style.left =   " 0px " ;
        }
         if (isNaN(parseInt(element.style.top))) {
            element.style.top =   " 0px " ;
        }
         // 挂上空，初始化这几个成员，在Drag.init被调用后才帮定到实际的函数，可以参照draggable里面的内容
        element.onDragStart =   new ();
        element.onDragEnd =   new ();
        element.onDrag =   new ();
    },
     // 开始拖拽的绑定，绑定到鼠标的移动的event上
    start: (event) {
         var element = Drag.obj =   this .obj;
         // 解决不同浏览器的event模型不同的问题
        event = Drag.fixE(event);
         // 看看是不是左键点击
         if (event.which !=   1 ) {
             // 除了左键都不起作用
             return   true ;
        }
         // 参照这个函数的解释，挂上开始拖拽的钩子
        element.onDragStart();
         // 记录鼠标坐标
        element.lastMouseX = event.clientX;
        element.lastMouseY = event.clientY;
         // 将Global的event绑定到被拖动的element上面来
        up = Drag.end;
        move = Drag.drag;
         return   false ;
    },
     // Element正在被拖动的函数
    drag: (event) {
         // 解决不同浏览器的event模型不同的问题
        event = Drag.fixE(event);
         // 看看是不是左键点击
         if (event.which ==   0 ) {
             // 除了左键都不起作用
             return Drag.end();
        }
         // 正在被拖动的Element
         var element = Drag.obj;
         // 鼠标坐标
         var _clientX = event.clientY;
         var _clientY = event.clientX;
         // 如果鼠标没动就什么都不作
         if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
             return   false ;
        }
         // 刚才Element的坐标
         var _lastX = parseInt(element.style.top);
         var _lastY = parseInt(element.style.left);
         // 新的坐标
         var newX, newY;
         // 计算新的坐标：原先的坐标+鼠标移动的值差
        newX = _lastY + _clientY - element.lastMouseX;
        newY = _lastX + _clientX - element.lastMouseY;
         // 修改element的显示坐标
        element.style.left = newX +   " px " ;
        element.style.top = newY +   " px " ;
         // 记录element现在的坐标供下一次移动使用
        element.lastMouseX = _clientY;
        element.lastMouseY = _clientX;
         // 参照这个函数的解释，挂接上Drag时的钩子
        element.onDrag(newX, newY);
         return   false ;
    },
     // Element正在被释放的函数，停止拖拽
    end: (event) {
         // 解决不同浏览器的event模型不同的问题
        event = Drag.fixE(event);
         // 解除对Global的event的绑定
        move =   null ;
        up =   null ;
         // 先记录下onDragEnd的钩子，好移除obj
         var _onDragEndFuc = Drag.obj.onDragEnd();
         // 拖拽完毕，obj清空
        Drag.obj =   null ;
         return _onDragEndFuc;
    },
     // 解决不同浏览器的event模型不同的问题
    fixE: (ig_) {
         if ( typeof ig_ ==   " undefined " ) {
            ig_ = event;
        }
         if ( typeof ig_.layerX ==   " undefined " ) {
            ig_.layerX = ig_.offsetX;
        }
         if ( typeof ig_.layerY ==   " undefined " ) {
            ig_.layerY = ig_.offsetY;
        }
         if ( typeof ig_.which ==   " undefined " ) {
            ig_.which = ig_.button;
        }
         return ig_;
    }
};

// 下面是初始化的函数了，看看上面这些东西怎么被调用
var _IG_initDrag =   (el) {
     // column那个容器，在google里面就是那个table布局的tbody，netvibes用的<div>
    Util.rootElement = el;
     // 这个tbody的行
    Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ];
     // 列，google是3列，其实也可以更多
    Util.column = Util._rows.cells;
     // 用来存取可拖拽的对象
    Util.dragArray =   new Array();
     var counter =   0 ;
     for ( var i =   0 ; i < Util.column.length; i ++ ) {
         // 搜索所有的column
         var ele = Util.column[i];
         for ( var j =   0 ; j < ele.childNodes.length; j ++ ) {
             // 搜索每一column里面的所有element
             var ele1 = ele.childNodes[j];
             // 如果是div就把它初始化为一个draggable对象
             if (ele1.tagName ==   " DIV " ) {
                Util.dragArray[counter] =   new draggable(ele1);
                counter ++ ;
            }
        }
    }
};