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

// 初始化可以拖拽的Element的函数，与拖拽无关的我去掉了
  draggable(el) {
     // 公用的开始拖拽的函数
     this ._dragStart  =  start_Drag;
     // 公用的正在拖拽的函数
     this ._drag  =  when_Drag;
     // 公用的拖拽结束的函数
     this ._dragEnd  =  end_Drag;
     // 这个函数主要用来进行拖拽结束后的dom处理
     this ._afterDrag  =  after_Drag;
     // 是否正在被拖动，一开始当然没有被拖动
     this .isDragging  =   false ;
     // 将这个Element的this指针注册在elm这个变量里面，方便在自己的上下文以外调用自己的函数等，很常用的方法
     this .elm  =  el;
     // 触发拖拽的Element，在这里就是这个div上显示标题的那个div
     this .header  =  getElementById(el.id  +   " _h " );
     // 对于有i的element拖拽不同，这里检测一下并记录
     this .hasI  =   this .elm.getElementsByTagName( " I " ).length  >   0 ;
     // 如果找到了header就绑定drag相关的event
     if  ( this .header) {
         // 拖拽时的叉子鼠标指针
         this .header.style.cursor  =   " move " ;
         // 将函数绑定到header和element的this上，参照那个函数的说明
        Drag.init( this .header,  this .elm);
         // 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上，也就实现了element从draggable继承可拖拽的函数
         this .elm.onDragStart  =  Util.bind( this ,  " _dragStart " );
         this .elm.onDrag  =  Util.bind( this ,  " _drag " );
         this .elm.onDragEnd  =  Util.bind( this ,  " _dragEnd " );
    }
};

// 下面就是draggable里面用到的那4个
// 公用的开始拖拽的函数
  start_Drag() {
     // 重置坐标，实现拖拽以后自己的位置马上会被填充的效果
    Util.re_calcOff( this );
     // 记录原先的邻居节点，用来对比是否被移动到新的位置
     this .origNextSibling  =   this .elm.nextSibling;
     // 获取移动的时候那个灰色的虚线框
     var  _ghostElement  =  getGhostElement();
     // 获取正在移动的这个对象的高度
     var  offH  =   this .elm.offsetHeight;
     if  (Util.isGecko) {
         // 修正gecko引擎的怪癖吧
        offH  -=  parseInt(_ghostElement.style.borderTopWidth)  *   2 ;
    }
     // 获取正在移动的这个对象的宽度
     var  offW  =   this .elm.offsetWidth;
     // 获取left和top的坐标
     var  offLeft  =  Util.getOffset( this .elm,  true );
     var  offTop  =  Util.getOffset( this .elm,  false );
     // 防止闪烁，现隐藏
    Util.hide();
     // 将自己的宽度记录在style属性里面
     this .elm.style.width  =  offW  +   " px " ;
     // 将那个灰框设定得与正在拖动的对象一样高，比较形象
    _ghostElement.style.height  =  offH  +   " px " ;
     // 把灰框放到这个对象原先的位置上
     this .elm.parentNode.insertBefore(_ghostElement,  this .elm.nextSibling);
     // 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来，所以设定position为absolute，这个可以参考一下css布局方面的知识
     this .elm.style.position  =   " absolute " ;
     // 设置zIndex，让它处在最前面一层，当然其实zIndex=100是让它很靠前，如果页面里有zIndex>100的，那……
     this .elm.style.zIndex  =   100 ;
     // 由于position=absolute了，所以left和top实现绝对坐标定位，这就是先前计算坐标的作用，不让这个模型乱跑，要从开始拖动的地方开始移动
     this .elm.style.left  =  offLeft  +   " px " ;
     this .elm.style.top  =  offTop  +   " px " ;
     // 坐标设定完毕，可以显示了，这样就不会闪烁了
    Util.show();
     // 这里本来有个ig_d.G，没搞明白干什么用的，不过没有也可以用，谁知道麻烦告诉我一声，不好意思
     // 还没有开始拖拽，这里做个记号
     this .isDragging  =   false ;
     return   false ;
};