弹出层拖拽

弹出层拖拽

两种不一样的拖动方式代码完全不相同。

1. 第一种方法任意拖动

    $(function() {
        //鼠标初始化位置
        var initMouseX = 0;
        var initMouseY = 0;
        //元素的初始化位置
        var initObjX = 0;
        var initObjY = 0;
        
        //鼠标按下标识
        var isDraging = false;
        
        //DOM-Object
        function g(id){
            var idclass = document.querySelector('.modal-content');
            return idclass;
        }
        //事件处理程序
        function eventHandler(elem, eventName, eventType){
            // elem.attachEvent 兼容IE8及以下版本浏览器事件
            // addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数
            elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);
        };
        
        //获取style属性值
        function getStyleValue(elem, property){
            //getComputedStyle、currentStyle 返回CSS样式声明对象([object CSSStyleDeclaration]) 只读
            //getComputedStyle 支持IE9+以上及正常浏览器
            //currentStyle 兼容IE8及IE8以下获取目标元素style样式
            return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];
        }
        //设置目标元素的位置
        function setObjPos(elem, pos){
            elem.style.left = pos.x +'px';
            elem.style.top = pos.y +'px';
        }
    
        //mousedown
        eventHandler(g('box'), function(event){
            //鼠标初始化位置
            initMouseX = event.clientX;
            initMouseY = event.clientY;
            //元素的初始化位置
            initObjX = parseInt(getStyleValue(g('box'), 'left'));
            initObjY = parseInt(getStyleValue(g('box'), 'top'));
            
            //鼠标按下标识
            isDraging = true;
        },'mousedown');
        //mousemove
        eventHandler(g('box'), function(event){
            if(isDraging){
                //鼠标初始化位置
                var moveX = event.clientX - initMouseX + initObjX;
                var moveY = event.clientY - initMouseY + initObjY;
                                            //设置元素位置
                    setObjPos(g('box'), {x:moveX, y:moveY});
            }
            },'mousemove');
            //mouseup  document.documentElement 防止鼠标拖出元素外
        eventHandler(document.documentElement, function(event){
            //鼠标离开停止动画
            isDraging = false;
        },'mouseup');
    })

2. 第二种方法不能拖动出body外

window.onload = function (){
		var oWin = document.querySelector('.content_text');
		var bDrag = false;
		var disX = disY = 0;
		oWin.onmousedown = function (event){  
			var event = event || window.event;
			bDrag = true;
			disX = event.clientX - oWin.offsetLeft;
			disY = event.clientY - oWin.offsetTop;  
			this.setCapture && this.setCapture();  
			return false
		};
		document.onmousemove = function (event){
			if (!bDrag) return;
			var event = event || window.event;
			var iL = event.clientX - disX;
			var iT = event.clientY - disY;
			var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
			var maxT = document.documentElement.clientHeight - oWin.offsetHeight;  
			iL = iL < 0 ? 0 : iL;
			iL = iL > maxL ? maxL : iL;   
			iT = iT < 0 ? 0 : iT;
			iT = iT > maxT ? maxT : iT;
			
			oWin.style.marginTop = oWin.style.marginLeft = 0;
			oWin.style.left = iL + "px";
			oWin.style.top = iT + "px";  
			return false
		};
		document.onmouseup = window.onblur = oWin.onlosecapture = function(){
			bDrag = false;    
			oWin.releaseCapture && oWin.releaseCapture();
		};
	};