对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 ;};