drag 弹框

/*-------------------------- +  获取id, class, tagName +-------------------------- */var get = {byId: function(id) {return typeof id === "string" ? document.getElementById(id) : id},byClass: function(sClass, oParent) {var aClass = [];var reClass = new RegExp("(^| )" + sClass + "( |$)");var aElem = this.byTagName("*", oParent);for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);return aClass},byTagName: function(elem, obj) {return (obj || document).getElementsByTagName(elem)}};var zIndex = 1050;//弹出框的层高var dragMapId = new Mapzhl();function dragZIndex(oDrag){zIndex++;oDrag.style.zIndex = zIndex;}//重置弹出框层高function dragZIndexInit(){var dragMapSize = dragMapId.size();var dragDivShowCoun = 0;if(dragMapSize>0){for(var i=0; i<dragMapSize; i++){var keyV = dragMapId.arr[i].key;var dragDisplay = document.getElementById(keyV).style.display;//alert(dragDisplay+"   "+(dragDisplay=="none")+"   "+(dragDisplay=="block"));if(dragDisplay=="block"){ //已经是隐藏状态dragDivShowCoun++;}}}if(dragDivShowCoun==0){zIndex = 1050;}/*var dragDiv = $(document).find(".drag");dragDiv.each(function(){if($(this).is(':visible')){//hiddendragDivShowCoun++;}});if(dragDivShowCoun==0){zIndex = 1050;}*/}/*-------------------------- +  拖拽函数 +-------------------------- */function drag(oDrag, handle, width, height){var dragMinWidth = width;var dragMinHeight = height;oDrag.style.display = "block";//点击的弹框始终在最上面dragZIndex(oDrag);/*dragMinWidth = width;dragMinHeight = height;*/var disX = dixY = 0;var oMin = get.byClass("min", oDrag)[0];var oMax = get.byClass("max", oDrag)[0];var oRevert = get.byClass("revert", oDrag)[0];var oClose = get.byClass("closedrag", oDrag)[0];handle = handle || oDrag;handle.style.cursor = "move";handle.onmousedown = function (event){//在点击拖动时该弹框放在最上面dragZIndex(oDrag);var event = event || window.event;disX = event.clientX - oDrag.offsetLeft;disY = event.clientY - oDrag.offsetTop;document.onmousemove = function (event){var event = event || window.event;//$("#alertinfo").html($("#alertinfo").html()+" "+event.clientX+" "+event.clientX+" "+oDrag.offsetLeft+" "+oDrag.offsetTop+"<br/>");var iL = event.clientX - disX;var iT = event.clientY - disY;var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;/** 设置可以拖动的范围只能为初始屏iL <= 0 && (iL = 0);iT <= 0 && (iT = 0);iL >= maxL && (iL = maxL);iT >= maxT && (iT = maxT);**/oDrag.style.left = iL + "px";oDrag.style.top = iT + "px";return false};document.onmouseup = function (){document.onmousemove = null;document.onmouseup = null;this.releaseCapture && this.releaseCapture()};this.setCapture && this.setCapture();return false};//最大化按钮oMax.onclick = function (){oDrag.style.top = oDrag.style.left = 0;oDrag.style.width = document.documentElement.clientWidth - 2 + "px";oDrag.style.height = document.documentElement.clientHeight - 2 + "px";this.style.display = "none";oRevert.style.display = "block";};//还原按钮oRevert.onclick = function (){//alert(oDrag.style.minWidth+"  "+oDrag.style.minHeight);oDrag.style.width = dragMinWidth + "px";oDrag.style.height = dragMinHeight + "px";/*//div设置最小宽度和最小高度， 在div最大还原时拿取最小亮度和最小高度oDrag.style.width = oDrag.style.minWidth;oDrag.style.height = oDrag.style.minHeight;*/oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";this.style.display = "none";oMax.style.display = "block";};//最小化按钮oMin.onclick = function (){oDrag.style.display = "none";};oClose.onclick = function (){oDrag.style.display = "none";dragZIndexInit();/* 会在页面中出现一个小图标var oA = document.createElement("a");oA.className = "open";oA.href = "javascript:;";oA.title = "还原";document.body.appendChild(oA);oA.onclick = function (){oDrag.style.display = "block";document.body.removeChild(this);this.onclick = null;};*/};//阻止冒泡oMin.onmousedown = function (event){this.onfocus = function () {this.blur()};(event || window.event).cancelBubble = true};oMax.onmousedown = function (event){this.onfocus = function () {this.blur()};(event || window.event).cancelBubble = true};oClose.onmousedown = function (event){this.onfocus = function () {this.blur()};(event || window.event).cancelBubble = true};}/*-------------------------- +  改变大小函数 +-------------------------- */function resize(oParent, handle, isLeft, isTop, lockX, lockY, width, height){var dragMinWidth = width;var dragMinHeight = height;handle.onmousedown = function (event){var event = event || window.event;var disX = event.clientX - handle.offsetLeft;var disY = event.clientY - handle.offsetTop;var iParentTop = oParent.offsetTop;var iParentLeft = oParent.offsetLeft;var iParentWidth = oParent.offsetWidth;var iParentHeight = oParent.offsetHeight;document.onmousemove = function (event){var event = event || window.event;var iL = event.clientX - disX;var iT = event.clientY - disY;var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;isLeft && (oParent.style.left = iParentLeft + iL + "px");isTop && (oParent.style.top = iParentTop + iT + "px");iW < dragMinWidth && (iW = dragMinWidth);iW > maxW && (iW = maxW);lockX || (oParent.style.width = iW + "px");iH < dragMinHeight && (iH = dragMinHeight);iH > maxH && (iH = maxH);lockY || (oParent.style.height = iH + "px");if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;return false;};document.onmouseup = function (){document.onmousemove = null;document.onmouseup = null;};return false;}};/** * @param iddiv对象id * @param width对象最小宽度 * @param height对象最小高度 */function oDrag(id, width, height){var oDrag = document.getElementById(id);//var width = oDrag.offsetWidth;//var height = oDrag.offsetHeight;var oTitle = get.byClass("title", oDrag)[0];var oL = get.byClass("resizeL", oDrag)[0];var oT = get.byClass("resizeT", oDrag)[0];var oR = get.byClass("resizeR", oDrag)[0];var oB = get.byClass("resizeB", oDrag)[0];var oLT = get.byClass("resizeLT", oDrag)[0];var oTR = get.byClass("resizeTR", oDrag)[0];var oBR = get.byClass("resizeBR", oDrag)[0];var oLB = get.byClass("resizeLB", oDrag)[0];drag(oDrag, oTitle, width, height);//四角resize(oDrag, oLT, true, true, false, false, width, height);resize(oDrag, oTR, false, true, false, false, width, height);resize(oDrag, oBR, false, false, false, false, width, height);resize(oDrag, oLB, true, false, false, false, width, height);//四边resize(oDrag, oL, true, false, false, true, width, height);resize(oDrag, oT, false, true, true, false, width, height);resize(oDrag, oR, false, false, false, true, width, height);resize(oDrag, oB, false, false, true, false, width, height);oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";//存入有哪些div设置为弹出层dragMapId.put(id,id);}/** * 单独设置关闭Drag * @param id */function oDragCloas(id){var oDrag = document.getElementById(id);oDrag.style.display = "none";dragZIndexInit();return true;}window.onload = window.onresize = function (){//oDrag.style.display = "none";//oDrag("drag" );}