简单拖拽实现

拖拽的元素必须绝对定位。

在实际操作中，犯了一个简单的错误：

　　对于iframe元素的事件绑定，需要在src完全加载后进行绑定。

　　

iframe.onload = function(){
  iframe.contentDocument.onclick = function(){}
  ...    
}

另外，目前版本对于iframe的拖动有bug，不过可以通过在div中嵌套iframe来实现兼容。

        var Drag = function(el,minX,maxX,minY,maxY){
            // 拖拽元素
            //el: 拖拽元素
            //minX: X轴最小边界
            //minY: Y轴最小边界
            //maxX: X轴最大边界
            //maxY: X轴最大边界
            var self = this;
            this.obj = el;
            this.obj.minX = minX;
            this.obj.minY = minY;
            this.obj.maxX = maxX;
            this.obj.maxY = maxY;
            
            if(isNaN(Drag.getLocation(el).x))
                this.obj.style.left = '0px';
            if(isNaN(Drag.getLocation(el).y))
                this.obj.style.top = '0px';
            if(el.tagName.toLowerCase() == 'iframe'){ 
                this.obj.contentDocument.onmousedown = function(e){  
                    start.call(el,e);
                    Drag.fixEvent(e).stopPropagation()
                };
            }else{
                this.obj.onmousedown = function(e){ 
                    start.call(el,e);
                    Drag.fixEvent(e).stopPropagation()
                };
            }
            
        }
        Drag.fixEvent = function(e){
            e = e || window.event;
            // 在此处，Chrome的layerX不正确，使用offsetX。
            // 另外，无法修改事件对象的属性，只能另外添加
            if(typeof e.layerX == "undefined" || e.layerX != e.offsetX ){ 
                e.lX = e.offsetX;
                e.lY = e.offsetY;
            }else{
                e.lX = e.layerX;
                e.lY = e.layerY;
            }
            if(!e.pageX)
                e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
            if(!e.pageY)
                e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
            if(!e.stopPropagation){
                e.stopPropagation = function(){
                    e.cancelBubble = true;
                }
            }
            if(!e.preventDefault){
                e.preventDefault = function(){
                    e.returnValue = false;
                }
            }
            return e;
        };
        Drag.getLocation = function(el){
            var location = {},style;
            if(window.getComputedStyle){
                style = window.getComputedStyle(el,''); 
                location.x = parseInt(style.getPropertyValue('left'));
                location.y = parseInt(style.getPropertyValue('top'));
            }else{
                style = el.currentStyle;
                location.x = parseInt(style['left']);
                location.y = parseInt(style['top']);
            }
            return location;
        };
        
        function start(e){  
            var self = this;  
            e = Drag.fixEvent(e); 
            this.inDOMLocation = {
                x: e.lX,
                y: e.lY
            };
            this.oldLocation = {
                x: e.clientX,
                y: e.clientY
            };  
            //设定鼠标的移动范围
            if(this.minX)
                this.minMouseX = e.layerX + this.minX;
            if(this.minY)
                this.minMouseY = e.layerY + this.minY;
            if(this.maxX)
                this.maxMouseX = this.maxX - (this.offsetWidth - (parseInt(this.clientLeft) || 0) - e.lX)
            if(this.maxY)
                this.maxMouseY = this.maxY - (this.offsetHeight - (parseInt(this.clientTop) || 0) - e.lY)

            if(this.tagName.toLowerCase() == 'iframe'){
                this.contentDocument.onmousemove = function(e){ 
                    drag.call(self,e);
                };
                this.contentDocument.onmouseup = function(e){
                    stop.call(self,e);
                };
            }else{
                this.onmousemove = function(e){
                    drag.call(self,e);
                };
                this.onmouseup = function(e){
                    stop.call(self,e);
                };
            }
            
        }
        function drag(e){
            e = Drag.fixEvent(e);
            var newLocation = {
                x: e.clientX,
                y: e.clientY
            }, x,y;
            x = newLocation.x;
            y = newLocation.y;
            if(this.minMouseX)
                x = Math.max(this.minMouseX,newLocation.x)
            if(this.minMouseY)
                y = Math.max(this.minMouseY,newLocation.y)
            if(this.maxMouseX)
                x = Math.min(this.maxMouseX,x)
            if(this.maxMouseY)
                y = Math.min(this.maxMouseY,y)

            this.style.left = Drag.getLocation(this).x + (x - this.oldLocation.x) + 'px';
            this.style.top = Drag.getLocation(this).y + (y - this.oldLocation.y) + 'px';
            this.oldLocation = {
                x: x,
                y: y
            };
            return;
        }
        function stop(){
            this.oldLocation = null;
            this.inDOMLocation = null;
            if(this.tagName.toLowerCase() == 'iframe'){
                this.contentDocument.onmouseup = this.contentDocument.onmousemove = null
            }else{
                this.onmouseup = this.onmousemove = null
            }                
        }

使用也很简单，

　　Drag.init(document.getElementById('d'),20,500,30,500)