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

2019-06-02 23:22:44丽君

     // 这个函数主要用来进行拖拽结束后的dom处理 
     this ._afterDrag  =  after_Drag;
     // 是否正在被拖动,一开始当然没有被拖动 
     this .isDragging  =   false ;
     // 将这个Element的this指针注册在elm这个变量里面,方便在自己的上下文以外调用自己的函数等,很常用的方法 
     this .elm  =  el;
     // 触发拖拽的Element,在这里就是这个div上显示标题的那个div 
     this .header  =  document.getElementById(el.id  +   " _h " );
     // 对于有iframe的element拖拽不同,这里检测一下并记录 
     this .hasIFrame  =   this .elm.getElementsByTagName( " IFRAME " ).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.bindFunction( this ,  " _dragStart " );
         this .elm.onDrag  =  Util.bindFunction( this ,  " _drag " );
         this .elm.onDragEnd  =  Util.bindFunction( this ,  " _dragEnd " );
    }
};

// 下面就是draggable里面用到的那4个function 
// 公用的开始拖拽的函数 
function  start_Drag() {
     // 重置坐标,实现拖拽以后自己的位置马上会被填充的效果 
    Util.re_calcOff( this );