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

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

     // 记录原先的邻居节点,用来对比是否被移动到新的位置 
     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实现绝对坐标定位,这就是先前计算坐标的作用,不让这个模型乱跑,要从开始拖动的地方开始移动