drag.js

igoogle首页风格的效果,可保存当前面板的状态.纯js

            
            addEventListener(document,"onmousemove",this._ondrag,false);
            addEventListener(document,"onmouseup",this._ondragend,false);
//            document.onmousemove = this._ondrag;
//            document.onmouseup = this._ondragend;
            this.initBeDrags(beDrags);
            this.initBoxs(boxs);
            drag.enabledExtNotice = enabledExtNotice;
            drag.enabledConstructor = enabledConstructor;
            drag.unabledConstructor = unabledConstructor;
        },
        "initBeDrags": function(objs){
            for(var i=0;i<objs.length;i++){
                var obj = getElementById(objs[i]);
                if(isDefined(typeof obj)){
//                    obj.onmousedown = this._ondragstart;
                    addEventListener(obj,"onmousedown",this._ondragstart,false);
                    obj.style.cursor = drag.effectAllowed;
                }
            }
        },
        "initBoxs":function(objs){
            for(var i=0;i<objs.length;i++){
                var obj = getElementById(objs[i]);
                if(isDefined(typeof obj)){
//                    obj.onmouseover = this._ondragover;
//                    obj.onmouseout = this._ondragleave;
                    addEventListener(obj,"onmouseover",this._ondragover,false);
                    addEventListener(obj,"onmouseout",this._ondragleave,false);
                    obj.style.cursor = drag.dropEffect;
                }
            }
        },
        "_ondragstart":function(e){
            e = fixEvent(e);
            
            drag.srcElement = e.srcElement;
            drag.isMouseUp = false;

            /*save the origninal data*/
            /*drag.placeholder = */drag.createDragPlaceHolder(e.srcElement);
            drag.container = drag.srcElement.parentNode;
            
            replaceElement(drag.srcElement,drag.placeholder);
            
            //!!It's important for testing.
            drag.srcElement.style.position = "fixed";
            drag.srcElement.style.display = "block";
            drag.srcElement.style.cursor = drag.effectAllowed;
            
            var p = new currCoordinate(e.srcElement);
                    
            drag.placeholder.style.left = p.left + "px";
            drag.placeholder.style.top = p.top + "px";
            
            p.left = e.pageX;
            p.top = e.pageY;

            drag.srcElement.style.left = p.left + drag.offsetX + "px";
            drag.srcElement.style.top = p.top + drag.offsetY + "px";

            oldCursor.left = e.pageX;
            oldCursor.top = e.pageY;

            if(drag.ondragstart != null)
                drag.ondragstart(e);

            /*extension*/  
            /*enable the notice*/
            if(drag.enabledExtNotice)
                _drag_ext_notice(false);
        },
        "_ondrag":function(e){
            if(drag.srcElement != null && drag.isMouseUp == false){
                e = fixEvent(e);

    //            drag.placeholder.style.left = e.pageX - oldCursor.left + parseInt(drag.placeholder.style.left) + "px";
    //            drag.placeholder.style.top = e.pageY - oldCursor.top + parseInt(drag.placeholder.style.top) + "px";
               
                drag.srcElement.style.left = e.pageX - oldCursor.left + parseInt(drag.srcElement.style.left) + "px";
                drag.srcElement.style.top = e.pageY - oldCursor.top + parseInt(drag.srcElement.style.top) + "px";

                oldCursor.left = e.pageX;
                oldCursor.top = e.pageY;
               
                
                if(drag.ondrag != null)
                    drag.ondrag(e);
            }
        },
        "_ondragend":function(e){
            e = fixEvent(e);
            drag.isMouseUp = true;
            if((drag.srcElement != null && drag.isMouseUp)==true)
            {
                /*extension*/  
                /*enable the notice*/
                if(drag.enabledExtNotice)
                    _drag_ext_notice(true);
                drag.ondragend(e);
            }
            //release resource.
            if(isDefined(typeof drag.placeholder) && drag.placeholder != null)
            {
                replaceElement(drag.placeholder,drag.srcElement);

                drag.srcElement.style.position = "static";
                    
                if(isDefined(typeof drag.placeholder.style)){
                    drag.placeholder.style.display = "none";
                }
                try{
                    //if the placeholder has be move to another place.
                    drag.container.removeChild(drag.placeholder);
                }catch(e){}
                drag.placeholder = null;
                drag.srcElement = null;
                drag.tarElement = null;
                drag.isMouseUp = true;
                //drag.isOverBox = false;
            }
        },
        "_ondragover":function(e){
            e = fixEvent(e);
            
            drag.isOverBox = true;
            if(isDefined(typeof e)&&e!=null&&isDefined(typeof e.srcElement) && e.srcElement != null
                &&drag.srcElement != null && drag.isMouseUp == false)
                drag.tarElement = e.srcElement;
            if(drag.ondragover != null)
                drag.ondragover(e);

            /*extension*/  
            /*enable the notice*/
            if(drag.enabledExtNotice)
                _drag_ext_notice(false);
        },
        "_ondragleave":function(e){
            e = fixEvent(e);

            drag.isOverBox = false;
            drag.tarElement = null;
            
            if(drag.ondragleave != null)
                drag.ondragleave(e);
              
            /*extension*/  
            /*enable the notice*/
            if(drag.enabledExtNotice)
                _drag_ext_notice(false);
        },
        "ondragstart":function(e){
        
        },
        "ondragend":function(e){
            
        },
        "ondrag":function(e){
        
        },
        "ondragover":function(e){
        
        },
        "ondragleave":function(e){
        
        },
        "createDragPlaceHolder":function(element){
            if(drag.placeholder == null){
                drag.placeholder = document.createElement(drag.srcElement.tagName);
                drag.placeholder.style.width = element.offsetWidth;
                drag.placeholder.style.height = element.offsetHeight;
                drag.placeholder.id = "_drag_placeholder_" + element.id.toString();
                //drag.placeholder.style.border = "dashed 0px #EEEEEE";
                //drag.placeholder.style.margin = "0px";
                //drag.placeholder.style.display = "block";
                //drag.placeholder.style.position = "static";
                //drag.placeholder.style.cursor = "default";
                //drag.placeholder.style.backgroundColor = "#EEEEEE";
            }
            return drag.placeholder;
        }
    };


    /*All the plug-in component would named start with "_drag_ext_". All of them are private to the user.*/
    var _drag_notice_name = null;
    var _drag_ext_notice = function(finished){
        
        ///<summary>
        /// An constructor of the 'enabled symbol', the parameter 'name' is necessary.
        /// You must use the name as the id of new element;
        ///</summary>
        ///<returns>the new element symbolize enabled.</returns>
        this.enabledConstructor = function(name){
            if(drag.enabledConstructor == null)
                return null;
            var ec = drag.enabledConstructor();
            ec.id = getName();
            return ec;
        };
        ///<summary>
        /// An constructor of the 'unabled symbol', the parameter 'name' is necessary.
        /// You must use the name as the id of new element;
        ///</summary>
        ///<returns>the new element symbolize unabled.</returns>
        this.unabledConstructor = function(name){
            if(drag.unabledConstructor == null)
                return null;
            var uc = drag.unabledConstructor();
            uc.id = getName();
            return uc;
        };
        
        function getName(){
            if(_drag_notice_name == null)
                _drag_notice_name = makeName("_drag_notice_name");
            return _drag_notice_name;
        }
     
        function createEnabledElement(notice_name){
            var enabledElement = this.enabledConstructor(notice_name);
            if(enabledElement == null){
                enabledElement = document.createElement("span");
                enabledElement.id = notice_name;
                enabledElement.innerHTML = "[OK]";
                enabledElement.style.backgroundColor = "yellow";
            }
            return enabledElement;
        }
        function createUnabledElement(notice_name){
            var unabledElement = this.unabledConstructor(notice_name);
            if(unabledElement == null){
                unabledElement = document.createElement("span");
                unabledElement.id = notice_name;
                unabledElement.innerHTML = "[×]";
                unabledElement.style.backgroundColor = "yellow";
            }
            return unabledElement;
        }
        
        if(drag.srcElement!=null){

            var ok = getElementById(getName());
            if(isDefined(typeof ok) && ok != null)
                removeNode(getName());

            if(finished == false){
                if(drag.isOverBox)
                {
                    drag.srcElement.insertBefore(createEnabledElement(getName()), getFirstchild(drag.srcElement));
                }
                else
                {
                    drag.srcElement.insertBefore(createUnabledElement(getName()), getFirstchild(drag.srcElement));
                }
            }
            return;       
        }
    }
    
    /*[Option]The interface to Visual Studio JavaScript IntelliSense*/
    this.srcElement = drag.srcElement;
    this.tarElement = drag.tarElement;
    this.init = function(beDrags,boxs,enabledExtNotice,enabledConstructor,unabledConstructor){
        return drag.init(beDrags,boxs,enabledExtNotice,enabledConstructor,unabledConstructor);
    }
    /*...*/
    
    return drag;
}