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

答案：作者：Tin
出处：http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html
代码：http://www.blogjava.net/Files/iamtin/google_drag.rar
复制代码 代码如下:

// 工具类，使用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_javascript_12  
Util.getOffset  =   function  (el, isLeft) { 
     var  retValue  =   0 ; 
     while  (el  !=   null ) { 
        retValue  +=  el[ " offset "   +  (isLeft  ?   " Left "  :  " Top " )]; 
        el  =  el.offsetParent; 
    } 
     return  retValue; 
}; 
// 将一个function（参数中的funcName是这个fuction的名字）绑定到一个element上，并且以这个element的上下文运行，其实是一种继承，这个可以google些文章看看  
Util.bindFunction  =   function  (el, fucName) { 
     return   function  () { 
         return  el[fucName].apply(el, arguments); 
    }; 
}; 
// 重新计算所有的可以拖拽的element的坐标，对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标，防止遮叠  
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面  
Util.re_calcOff  =   function  (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  =   function  () { 
    Util.rootElement.style.display  =   " none " ; 
}; 
// 显示Google Ig中间那个table，解释同上  
Util.show  =   function  () { 
    Util.rootElement.style.display  =   "" ; 
}; 

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

// 初始化可以拖拽的Element的函数，与拖拽无关的我去掉了  
function  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  =  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 ); 
     // 记录原先的邻居节点，用来对比是否被移动到新的位置  
     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 ; 
}; 
// 在拖拽时的相应函数，由于绑定到鼠标的move这个event上，所以会传入鼠标的坐标clientX, clientY  
function  when_Drag(clientX, clientY) { 
     // 刚开始拖拽的时候将图层变透明，并标记为正在被拖拽  
     if  ( ! this .isDragging) { 
         this .elm.style.filter  =   " alpha(opacity=70) " ; 
         this .elm.style.opacity  =   0.7 ; 
         this .isDragging  =   true ; 
    } 
     // 被拖拽到的新的column（当然也可以是原来那个）  
     var  found  =   null ; 
     // 最大的距离，可能是防止溢出或者什么bug  
     var  max_distance  =   100000000 ; 
     // 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便后面插入  
     for  ( var  i  =   0 ; i  <  Util.dragArray.length; i ++ ) { 
         var  ele  =  Util.dragArray[i]; 
         // 利用勾股定理计算鼠标到遍历到的这个元素的距离  
         var  distance  =  Math.sqrt(Math.pow(clientX  -  ele.elm.pagePosLeft,  2 )  +  Math.pow(clientY  -  ele.elm.pagePosTop,  2 )); 
         // 自己已经浮动了，所以不计算自己的  
         if  (ele  ==   this ) { 

上一个：如何写一个通用的JavaScript效果库！(2/2)
下一个：使用prototype.js 的时候应该特别注意的几个问题.