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

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

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 ) {