// 在拖拽时的相应函数,由于绑定到鼠标的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 ) {
             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的现实问题,要隐藏/显示后才能刷新出变化 
            document.body.style.display  =   " none " ;
            document.body.style.display  =   "" ;
        }
    }
};
// 拖拽完毕 
function  end_Drag() {
     // 拖拽完毕后执行后面的钩子,执行after_Drag(),如果布局发生了变动了就记录到远程服务器,保存你拖拽后新的布局顺序 
     if  ( this ._afterDrag()) {
         // remote call to save the change 
    }
     return   true ;
};
// 拖拽后的执行钩子 
function  after_Drag() {
     var  returnValue  =   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);
         // 标明被拖拽了新的地方 
        returnValue  =   true ;
    }
     // 移除灰框,这是这个灰框的生命周期应该就结束了 
    ele.parentNode.removeChild(ele);
     // 修改完毕,显示 
    Util.show();
     if  (Util.isOpera) {
         // Opera的现实问题,要隐藏/显示后才能刷新出变化 
        document.body.style.display  =   " none " ;
        document.body.style.display  =   "" ;
    }
     return  returnValue;
};

解决方案 »

  1.   

    // 可拖拽Element的原形,用来将event绑定到各个钩子,这部分市比较通用的,netvibes也是基本完全相同的实现 
    // 这部分推荐看dindin的这个,也会帮助理解,http://www.jroller.com/page/dindin/?anchor=pro_javascript_12 
    var  Drag  =  {
         // 对这个element的引用,一次只能拖拽一个Element 
        obj: null , 
         // element是被拖拽的对象的引用,elementHeader就是鼠标可以拖拽的区域 
        init: function  (elementHeader, element) {
             // 将start绑定到onmousedown事件,按下鼠标触发start 
            elementHeader.onmousedown  =  Drag.start;
             // 将element存到header的obj里面,方便header拖拽的时候引用 
            elementHeader.obj  =  element;
             // 初始化绝对的坐标,因为不是position=absolute所以不会起什么作用,但是防止后面onDrag的时候parse出错了 
             if  (isNaN(parseInt(element.style.left))) {
                element.style.left  =   " 0px " ;
            }
             if  (isNaN(parseInt(element.style.top))) {
                element.style.top  =   " 0px " ;
            }
             // 挂上空Function,初始化这几个成员,在Drag.init被调用后才帮定到实际的函数,可以参照draggable里面的内容 
            element.onDragStart  =   new  Function();
            element.onDragEnd  =   new  Function();
            element.onDrag  =   new  Function();
        },
         // 开始拖拽的绑定,绑定到鼠标的移动的event上 
        start: function  (event) {
             var  element  =  Drag.obj  =   this .obj;
             // 解决不同浏览器的event模型不同的问题 
            event  =  Drag.fixE(event);
             // 看看是不是左键点击 
             if  (event.which  !=   1 ) {
                 // 除了左键都不起作用 
                 return   true ;
            }
             // 参照这个函数的解释,挂上开始拖拽的钩子 
            element.onDragStart();
             // 记录鼠标坐标 
            element.lastMouseX  =  event.clientX;
            element.lastMouseY  =  event.clientY;
             // 将Global的event绑定到被拖动的element上面来 
            document.onmouseup  =  Drag.end;
            document.onmousemove  =  Drag.drag;
             return   false ;
        }, 
         // Element正在被拖动的函数 
        drag: function  (event) {
             // 解决不同浏览器的event模型不同的问题 
            event  =  Drag.fixE(event);
             // 看看是不是左键点击 
             if  (event.which  ==   0 ) {
                 // 除了左键都不起作用 
                 return  Drag.end();
            }
             // 正在被拖动的Element 
             var  element  =  Drag.obj;
             // 鼠标坐标 
             var  _clientX  =  event.clientY;
             var  _clientY  =  event.clientX;
             // 如果鼠标没动就什么都不作 
             if  (element.lastMouseX  ==  _clientY  &&  element.lastMouseY  ==  _clientX) {
                 return   false ;
            }
             // 刚才Element的坐标 
             var  _lastX  =  parseInt(element.style.top);
             var  _lastY  =  parseInt(element.style.left);
             // 新的坐标 
             var  newX, newY;
             // 计算新的坐标:原先的坐标+鼠标移动的值差 
            newX  =  _lastY  +  _clientY  -  element.lastMouseX;
            newY  =  _lastX  +  _clientX  -  element.lastMouseY;
             // 修改element的显示坐标 
            element.style.left  =  newX  +   " px " ;
            element.style.top  =  newY  +   " px " ;
             // 记录element现在的坐标供下一次移动使用 
            element.lastMouseX  =  _clientY;
            element.lastMouseY  =  _clientX;
             // 参照这个函数的解释,挂接上Drag时的钩子 
            element.onDrag(newX, newY);
             return   false ;
        },
         // Element正在被释放的函数,停止拖拽 
        end: function  (event) {
             // 解决不同浏览器的event模型不同的问题 
            event  =  Drag.fixE(event);
             // 解除对Global的event的绑定 
            document.onmousemove  =   null ;
            document.onmouseup  =   null ;
             // 先记录下onDragEnd的钩子,好移除obj 
             var  _onDragEndFuc  =  Drag.obj.onDragEnd();
             // 拖拽完毕,obj清空 
            Drag.obj  =   null ;
             return  _onDragEndFuc;
        }, 
         // 解决不同浏览器的event模型不同的问题 
        fixE: function  (ig_) {
             if  ( typeof  ig_  ==   " undefined " ) {
                ig_  =  window.event;
            }
             if  ( typeof  ig_.layerX  ==   " undefined " ) {
                ig_.layerX  =  ig_.offsetX;
            }
             if  ( typeof  ig_.layerY  ==   " undefined " ) {
                ig_.layerY  =  ig_.offsetY;
            }
             if  ( typeof  ig_.which  ==   " undefined " ) {
                ig_.which  =  ig_.button;
            }
             return  ig_;
        }
    };// 下面是初始化的函数了,看看上面这些东西怎么被调用 
    var  _IG_initDrag  =   function  (el) {
         // column那个容器,在google里面就是那个table布局的tbody,netvibes用的<div> 
        Util.rootElement  =  el;
         // 这个tbody的行 
        Util._rows  =  Util.rootElement.tBodies[ 0 ].rows[ 0 ];
         // 列,google是3列,其实也可以更多 
        Util.column  =  Util._rows.cells;
         // 用来存取可拖拽的对象 
        Util.dragArray  =   new  Array();
         var  counter  =   0 ;
         for  ( var  i  =   0 ; i  <  Util.column.length; i ++ ) {
             // 搜索所有的column 
             var  ele  =  Util.column[i];
             for  ( var  j  =   0 ; j  <  ele.childNodes.length; j ++ ) {
                 // 搜索每一column里面的所有element 
                 var  ele1  =  ele.childNodes[j];
                 // 如果是div就把它初始化为一个draggable对象 
                 if  (ele1.tagName  ==   " DIV " ) {
                    Util.dragArray[counter]  =   new  draggable(ele1);
                    counter ++ ;
                }
            }
        }
    };
      

  2.   

    上面就是google个性页面的js代码,请问怎么保存在cookie里面,以保证页面保存在cookie中。。急急
      

  3.   

    一般cookies只可以保存4k的数据.
      

  4.   

    我现在只要知道保存这个页面位置的cookie就好了,其他的都已经解决!
      

  5.   

    http://bpple.com/blog/?action=show&id=127
      

  6.   

    我现在只要知道保存这个页面位置的cookie就好了,其他的都已经解决!