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

// 在拖拽时的相应函数，由于绑定到鼠标的move这个event上，所以会传入鼠标的坐标clientX, clientY
  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 ) {
             continue ;
        }
         // 如果计算失败继续循环
         if  (isNaN(distance)) {
             continue ;
        }
         // 如果更小，记录下这个距离，并将它作为found
         if  (distance  <  max_distance) {
            max_distance  =  distance;
            found  =  ele;
        }
    }
     // 准备让灰框落脚
     var  _ghostElement  =  getGhostElement();
     // 如果找到了另外的落脚点
     if  (found  !=   null   &&  _ghostElement.nextSibling  !=  found.elm) {
         // 找到落脚点就先把灰框插进去，这就是我们看到的那个灰框停靠的特效，有点像吸附的感觉，哈哈
        found.elm.parentNode.insertBefore(_ghostElement, found.elm);
         if  (Util.isOpera) {
             // Opera的现实问题，要隐藏/显示后才能刷新出变化
            body.style.display  =   " none " ;
            body.style.display  =   "" ;
        }
    }
};
// 拖拽完毕
  end_Drag() {
     // 拖拽完毕后执行后面的钩子，执行after_Drag()，如果布局发生了变动了就记录到远程服务器，保存你拖拽后新的布局顺序
     if  ( this ._afterDrag()) {
         // remote call to save the change
    }
     return   true ;
};
// 拖拽后的执行钩子
  after_Drag() {
     var  return  =   false ;
     // 防止闪烁
    Util.hide();
     // 把拖拽时的position=absolute和相关的那些style都消除
     this .elm.style.position  =   "" ;
     this .elm.style.width  =   "" ;
     this .elm.style.zIndex  =   "" ;
     this .elm.style.filter  =   "" ;
     this .elm.style.opacity  =   "" ;
     // 获取灰框
     var  ele  =  getGhostElement();
     // 如果现在的邻居不是原来的邻居了
     if  (ele.nextSibling  !=   this .origNextSibling) {
         // 把被拖拽的这个节点插到灰框的前面
        ele.parentNode.insertBefore( this .elm, ele.nextSibling);
         // 标明被拖拽了新的地方
        return  =   true ;
    }
     // 移除灰框，这是这个灰框的生命周期应该就结束了
    ele.parentNode.removeChild(ele);
     // 修改完毕，显示
    Util.show();
     if  (Util.isOpera) {
         // Opera的现实问题，要隐藏/显示后才能刷新出变化
        body.style.display  =   " none " ;
        body.style.display  =   "" ;
    }
     return  return;
};