javascript拖动层函数封装

(function(){
    
    
    function Drag(){
        
        this.init.apply(this,arguments[0]);
            
    }
    
    Drag.prototype = {

        constructor:Drag,
        
        init:function(){
            
            if(typeof arguments[0] !== "object") return;
            
            this.element = arguments[0];
            
            //alert(this.element.setCapture); //火狐下也有这个对象？Chrome undefined 
            // 可以拖动的范围 默认为整个窗口
            //如果提供了参数，限制活动范围，默认为当前窗口
            if(arguments[1]){
                
                this.movedLeft = arguments[1].left||0; 
            
                this.movedTop = arguments[1].top ||0;
                
                this.movedRight = arguments[1].right||document.documentElement.clientWidth;
                
                this.movedBottom = arguments[1].bottom||document.documentElement.clientHeight;
                
            }            
            // saved 鼠标按下时候的位置
            
            this.mouseDownPosX = 0;
            
            this.mouseDownPosY = 0;
            
            var _this = this;
            
            this.element.onmousedown = function(e){
                var e = e||window.event;

                _this.downFn(e);
                
                if(document.all){
                    
                    _this.element.onmousemove = function(){
                        
                    
                        _this.moveFn();
                    }

                    _this.element.onmouseup = function(){
                        
                        _this.moveUp();
                
                    }    
                }else{

                    document.onmousemove = function(e){

                        _this.moveFn(e);

                    }

                    document.onmouseup  = function(){
                        
                        _this.moveUp();

                    }

                }

                return false; // 阻止浏览器默认事件(鼠标移动文字被选中的问题)
            }
            
        },
        
        downFn:function(e){
            
            
            //? 假如是在一个相对或者绝对定位的容器内移动，this.element.offsetParent 不是 document 时，会有BUG
            this.mouseDownPosX = e.clientX - this.element.offsetLeft;
            
            this.mouseDownPosY = e.clientY - this.element.offsetTop;
            
            //alert(this.mouseDownPosX + " -- " +this.mouseDownPosY);
                
            if(document.all){
            
                this.element.setCapture();

            }
                            
        },
        
        moveFn:function(e){
            
            var e = e||window.event;

            var l = e.clientX - this.mouseDownPosX;

            var t = e.clientY - this.mouseDownPosY;

            // 限制活动范围
            if(l < this.movedLeft){
                
                l = this.movedLeft;

            }

            if(l>this.movedRight - this.element.offsetWidth){
                
                l = this.movedRight - this.element.offsetWidth;
                
            }

            if(t < this.movedTop){
                
                t = this.movedTop;

            }

            if(t > this.movedBottom - this.element.offsetHeight){
            
                t= this.movedBottom - this.element.offsetHeight;
            }
            
            
            this.element.style.left = l + "px";
            this.element.style.top =  t + "px";
            
        },

        moveUp:function(){
            
            if(document.all){
                
                this.element.releaseCapture();
                this.element.onmousemove = null;
                this.element.onmouseup = null;


            }else{
                
                document.onmousemove = null;
                document.onmouseup = null;
                

            }

            document.onmousedown = null;

        }    
            
    }
    
    function drag(){
        
        return new Drag(arguments);
            
    }
    
    window.drag = drag;
        
})();

obj.setCapture() 和 obj.releaseCapture()用法。

这两个是IE下用来捕获系统鼠标事件的方法。

当调用一次 obj.setCapture，系统上发生的鼠标事件将会被绑定到以这个对象上。调用一次绑定一次。而不是一次调用，就一直绑定。

 

测试代码：

var div = document.getElementById("d");
d.onclick = function(){
   alert("");   
}

d.setCapture();

当页面打开时，点击系统上任意一个地方，都会谈出空白窗口，但是再次点击，就无效了。

页面刷新后，又可以弹出，再点击就无效。所以得出。只是被绑定一次。

 

 

那上面的例子来说，当鼠标按下的时候，将后续发生的鼠标事件绑定到这个对象上。这样就不会触发到其他对象，可以避免拖拽过程中，文字被选中，鼠标移出到对象外，该对象停止不动等问题。

 

在火狐中这个方法名称已经被占用：

测试代码

window.onload = function(){
    var o = document.getElementById("o");
        alert(o.setCapture);
}

会弹出一个function

版本 firefox 21.0 2012.6月版本，当前为最新版。chrome下是undefined 。所以做检测的时候不能使用这个属性作为检测IE浏览器的依据。