Posted in Javascript onJune 23, 2009
自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 https://3water.com/article/16122.htm
注意,本文类中的Cminfo类请 查看:
https://3water.com/article/18760.htm
//*********************************移动层 函数 开始******************************************* //生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体) //new divDrag(['test'], [getObject('test31'),getObject('test3')], getObject('test1') ,getObject('test2') ,[getObject('test41'),getObject('test4')]); //记得有拖动属性的层position:absolute; Array.prototype.extend = function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;} function divDrag() { var A,B,gCn; var zIndex = 1; this.dragStart = function(e) { e = e||window.event; if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return;} var pos = this.gPos; gCn = this.parent||this; if(document.defaultView) { _top = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("top"); _left = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("left"); } else { if(gCn.currentStyle) { _top = gCn.currentStyle["top"]; _left = gCn.currentStyle["left"]; } } pos.ox = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left); pos.oy = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top); if(!!A) { if(document.removeEventListener) { document.removeEventListener("mousemove",A,false); document.removeEventListener("mouseup",B,false); } else { document.detachEvent("onmousemove",A); document.detachEvent("onmouseup",B); } } A = this.dragMove.create(this); B = this.dragEnd.create(this); if(document.addEventListener) { document.addEventListener("mousemove",A,false); document.addEventListener("mouseup",B,false); } else { document.attachEvent("onmousemove",A); document.attachEvent("onmouseup",B); } gCn.style.zIndex = (++zIndex); } this.dragMove = function(e) { e = e||window.event; var pos = this.gPos; gCn = this.parent||this; gCn.style.top = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px'; gCn.style.left = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px'; try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=70)";}else{gCn.style.opacity = "0.7";}}catch(e){} this.stop(e); } this.dragEnd = function(e) { var pos = this.gPos; e = e||window.event; if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return}; gCn = this.parent||this; if(!!(this.parent)){this.style.backgroundColor = pos.color;} try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=100)";}else{gCn.style.opacity = 1;}}catch(e){} if(document.removeEventListener) { document.removeEventListener("mousemove",A,false); document.removeEventListener("mouseup",B,false); } else { document.detachEvent("onmousemove",A); document.detachEvent("onmouseup",B); } A = null; B = null; gCn.style.zIndex = (++zIndex); this.stop(e); } this.shiftColor = function() { this.style.backgroundColor="#EEEEEE"; } this.position = function (e) { var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } return {x:l,y:t,ox:0,oy:0,color:null} } this.stop = function(e) { if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;} if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;} } this.create = function(bind) { var B = this; var A = bind; return function(e){return B.apply(A,[e]);} } this.dragStart.create = this.create; this.dragMove.create = this.create; this.dragEnd.create = this.create; this.shiftColor.create = this.create; this.initialize = function() { for(var A=0,B=arguments.length;A<B;A++) { C=arguments[A]; if(!(C.push)){C = [C];} gC = (typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?getObject(C[0]):null); if(!gC){continue}; gC.gPos = this.position(gC); gC.dragMove = this.dragMove; gC.dragEnd = this.dragEnd; gC.stop = this.stop; if(!!C[1]) { gC.parent = C[1]; gC.gPos.color = gC.style.backgroundColor; } if(gC.addEventListener) { gC.addEventListener("mousedown",this.dragStart.create(gC),false); if(!!C[1]){gC.addEventListener("mousedown",this.shiftColor.create(gC),false); } } else { gC.attachEvent("onmousedown",this.dragStart.create(gC)); if(!!C[1]){gC.attachEvent("onmousedown",this.shiftColor.create(gC));} } } } this.initialize.apply(this,arguments); } //*********************************移动层 函数 结束*******************************************
一个很酷的拖动层的js类,兼容IE及Firefox
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@