js的拖动效果

阳光穿透心脏的1/2处 2022-08-14 03:58 173阅读 0赞

体验成长的快乐,即使风雨满天............................

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Drag</title> <style type="text/css"> body\{ padding:0px; margin:0px; \} </style> </head> <body> <div id='ss' style="height:100px; width:100px; background-color:\#FFFF00; margin:100px;">一般test(带margin的)</div> <div id='c' style="height:300px; width:300px; border:1px solid \#000000; "> <div id='xx' style="height:80px; width:80px; background-color:\#FFCCCC">容器范围限制</div> </div> <div id='tt' style="height:100px; width:100px; background-color: \#00FFFF;">限制在页面内,不会产生滚动条</div> <script type="text/javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Sys = (function(ua)\{ var s = \{\}; s.IE = ua.match(/msie (\[/d.\]+)/)?true:false; s.Firefox = ua.match(/firefox//(\[/d.\]+)/)?true:false; s.Chrome = ua.match(/chrome//(\[/d.\]+)/)?true:false; s.IE6 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6))?true:false; s.IE7 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 7))?true:false; s.IE8 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 8))?true:false; return s; \})(navigator.userAgent.toLowerCase()); var wt = \{ elm: null, $ : function(id,p)\{ var arr = id.split(" "); this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr\[0\]).getElementsByTagName(arr\[1\]); return p?this.elm:wt; \}, $$ : function(o,v,p)\{ this.elm = v?o.getElementsByTagName(v):o; return p?this.elm:wt; \}, $G : function(i,p)\{ this.elm = this.elm\[i\]; return p?this.elm:wt; \}, $C : function(o)\{ this.elm = document.createElement(o); return wt; \}, $R : function()\{ this.elm.parentNode.removeChild(this.elm); return wt; \}, Html : function(str)\{ this.elm.innerHTML = str; return wt; \}, Attr : function(k,v,p)\{ if(typeof k == "string") \{ if(!v) \{ if(this.elm.getAttribute(k)&&this.elm.getAttribute(k)!="\[object\]") return this.elm.getAttribute(k); else return this.elm\[k\]; \} if(!Sys.IE6&&!Sys.IE7&&typeof v=="object") this.elm\[k\]=v; else this.elm.setAttribute(k,v); return wt; \} if(typeof k == "object") for(var pro in k)this.elm.setAttribute(pro,k\[pro\]); return wt; \}, appendTo : function(p)\{ p.appendChild(this.elm); return wt; \}, insertBefore : function(old)\{ old.parentNode.insertBefore(this.elm,old); return wt; \}, Css : function(k,v)\{ if(typeof k == "string") \{ if(!v)return this.CurrentStyle(this.elm)\[k\]; this.elm.style\[k\] = v ; return wt; \} if(typeof k == "object") for(var pro in k)this.elm.style\[pro\] = k\[pro\]; return wt; \}, Class : function(v)\{ this.elm.className = v; return wt; \}, getTarget : function(e)\{ return e.srcElement||e.target; \}, AddListener : function(e,fn)\{ this.elm.addEventListener?this.elm.addEventListener(e,fn,false):this.elm.attachEvent("on" + e,fn); return wt; \}, RemoveListener : function(e,fn)\{ this.elm.removeEventListener?this.elm.removeEventListener(e,fn,false):this.elm.detachEvent("on" + e,fn); return wt; \}, Bind : function(o,fn,args)\{ return function()\{ return fn.apply(o,args||\[\]); \} \}, BindAsEventListener : function(o,fn,args)\{ return function(event)\{ return fn.apply(o,\[event||window.event\].concat(args)); \} \}, Extend : function(destination, source)\{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \}, Bubble : function(e)\{ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); \}, CurrentStyle : function()\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \}, Getpos : function(el,left)\{ var val = 0; while (el !=null) \{ val += el\["offset" + (left? "Left": "Top")\]; el = el.offsetParent; \} return val; \} \}; //=========================================================================================================================== var Drag = new Class(\{ options :\{ Custom : false, //自定义样式 Noscroll : false, //拖动时设置元素不能离开页面 Limit : false, //是否设置限制拖动范围 mxLeft : 0, //做限制后的最大左范围 mxRight : 9999, //做限制后的最大右范围 mxTop : 0, //做限制后的最大上范围 mxBottom : 9999, //做限制后的最大下范围 mxContainer : null, //是否有容器限制 LockX : false, //锁定X轴 LockY : false, //锁定Y轴 zIndex : 2, //设置他样式中的z-Index Onstart : function()\{\}, Onmove : function()\{\}, Onstop : function()\{\} \}, initialize : function(obj,options)\{ this.\_obj = obj; //拖动的元素 this.\_x = 0; //点在元素上离元素最左边的位置 this.\_y = 0; //点在元素上离元素最右边的位置 this.\_marginLeft = 0; //如果元素样式有marginleft 就用他来记录 this.\_marginTop = 0; //如果元素样式有margintop 用他来记录 this.\_fM = wt.BindAsEventListener(this,this.Move); //做句柄 方便添加删除事件 this.\_fS = wt.Bind(this,this.Stop); //=========================================================================================================================== var con = this.options; wt.Extend(con,options||\{\}); wt.Extend(this,con); //=========================================================================================================================== if(this.mxContainer&&this.Limit) \{ this.mxLeft = wt.Getpos(this.mxContainer,1); this.mxTop = wt.Getpos(this.mxContainer,0); this.mxRight = this.mxLeft + this.mxContainer.offsetWidth-this.\_obj.offsetWidth; this.mxBottom = this.mxTop + this.mxContainer.offsetHeight-this.\_obj.offsetHeight; \} wt.$$(obj).Css("position","absolute").AddListener("mousedown",wt.BindAsEventListener(this,this.Start)); Drag.zIndex = this.zIndex; \}, Start : function(e)\{ this.\_obj.style.zIndex = ++Drag.zIndex; //选中的元素的z-Index每次都+一次 if(this.Noscroll) //设置了不出现滚动条限制后,计算范围 \{ this.mxRight = Math.max(document.body.scrollWidth, document.documentElement.clientWidth)-this.\_obj.offsetWidth-2; this.mxBottom = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)-this.\_obj.offsetHeight-2 \} this.\_x = e.clientX - this.\_obj.offsetLeft ; this.\_y = e.clientY - this.\_obj.offsetTop; this.\_marginLeft = parseInt(this.\_obj.style.marginLeft)||0; this.\_marginTop = parseInt(this.\_obj.style.marginTop)||0; if(Sys.IE) \{ wt.$$(this.\_obj).AddListener("losecapture", this.\_fS); //有alert 或者 按切换切面的时候 会自动释放掉捕获; this.\_obj.setCapture(); //绑定鼠标事件 为的是鼠标离开浏览浏览器后不会丢失捕获; \} else \{ e.preventDefault(); wt.$$(window).AddListener("blur", this.\_fS); \} wt.$$(document).AddListener("mousemove",this.\_fM).AddListener("mouseup",this.\_fS); this.Onstart(); \}, Move : function(e)\{ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //清空选中 var iLeft = e.clientX - this.\_x, iTop = e.clientY - this.\_y; if(this.Limit) //如果做了限制 就不能超过他的限制范围 \{ iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight); iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom); \} if(!this.LockX)this.\_obj.style.left = iLeft - this.\_marginLeft + "px"; if(!this.LockY)this.\_obj.style.top = iTop - this.\_marginTop + "px"; this.Onmove(); \}, Stop : function()\{ //这里主要就是清除一些在上面绑定的了事件....... wt.$$(document).RemoveListener('mousemove',this.\_fM).RemoveListener('mouseup',this.\_fS); if(Sys.IE) \{ wt.$$(this.\_obj).RemoveListener("losecapture", this.\_fS); this.\_obj.releaseCapture(); \} else wt.$$(window).RemoveListener("blur", this.\_fS); this.Onstop(); \} \}); window.onload = function()\{ new Drag(wt.$("ss",1),\{Limit:true\}); new Drag(wt.$("xx",1),\{mxContainer : wt.$("c",1),Limit : true\}); new Drag(wt.$("tt",1),\{Limit:true,Noscroll:true\}); \} </script> </body> </html>

原来的写法  其实都一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Drag!!!</title> <style type="text/css"> .bgdiv\{ border:1px dotted \#333333; \} .bgdiv1\{ background-color:\#666666; filter:alpha(opacity=30); opacity: 0.3; \} </style> </head> <body style=" padding:0px; margin:0px"> <img id='ii' src='http://album.hi.csdn.net/app\_uploads/wtcsy/20090602/171041823.p.gif' style=" position:absolute; left:300px; top:53px;"> <div style=" padding-left:200px; padding-top:50px;"><img id='iii' src='http://album.hi.csdn.net/app\_uploads/wtcsy/20090602/171203276.p.gif'></div> <div id='sss' style="height:400px; width:500px; border:1px solid \#FF0000; margin:50px;"></div> <div id='ss' style="height:100px; width:100px; border:1px solid \#000000; background-color:\#FFFFFF; left:200px; top:200px;"></div> <div id='ssss' style="height:250px; width:300px; background-color:\#FFFFFF; left:300px; top:100px; position:absolute"> <div style="height:30px; width:100%; background-color:\#99FF00;"></div> <div style="height:220px; width:100%; background-color:\#0000FF;" οnmοusedοwn="var e=event||window.event;if(document.all)\{e.cancelBubble=true\}else\{e.preventDefault()\}"></div> </div> <div id='s' style=" background-color:\#FFFFFF; height:100px; width:100px; border:1px solid \#000000; position:absolute; left:10px; top:10px;">不会产生滚动条</div> <div id='wt' style="height:96px; width:246px; background-color:\#0000FF"><img src='http://comic.qq.com/z/naruto/images/246\_96.jpg'></div> <script> var IsIE = document.all?true:false; function $(Id)\{return document.getElementById(Id)\}; function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)\}; function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)\}; function create(elm,parent,fn)\{var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);\}; function getobjpos(el,left)\{ var val = 0; while (el !=null) \{ val += el\["offset" + (left? "Left": "Top")\]; el = el.offsetParent; \} return val; \}; var CurrentStyle = function(element)\{return element.currentStyle || document.defaultView.getComputedStyle(element, null);\}; var isIE = document.all?true:false; var Bind = function(object, fun) \{ return function() \{ return fun.apply(object, arguments); \} \}; var BindAsEventListener = function(object, fun) \{ return function(event) \{ return fun.call(object, (event || window.event)); \} \}; var extend = function() \{ var args = arguments; if(!args\[1\])args = \[this,args\[0\]\]; for(var property in args\[1\])args\[0\]\[property\] = args\[1\]\[property\]; return args\[0\]; \}; var Class = function(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Drag = new Class(\{ options:\{ Custom : false, Customdiv : null, Limit : false, mxLeft : 0, mxRight : 9999, mxTop : 0, mxBottom : 9999, Noscroll : false, mxContainer : null, LockX : false, LockY : false, zIndex : 2, Onstart : function()\{\}, Onmove : function()\{\}, Onstop : function()\{\} \}, initialize:function(obj,options)\{ this.\_obj = obj; this.\_x = 0; this.\_y = 0; this.\_marginLeft = 0; this.\_marginTop = 0; this.\_fM = BindAsEventListener(this, this.Move); this.\_fS = Bind(this, this.Stop); / this.Custom = this.options.Custom; //判断是不是自己定义拖动样式 this.Customdiv = this.options.Customdiv; //保存拖动样式的div this.Limit = this.options.Limit; //是否设置拖动限制范围 this.mxLeft = this.options.mxLeft; this.mxRight = this.options.mxRight; this.mxTop = this.options.mxTop; this.mxBottom = this.options.mxBottom; this.mxContainer = this.options.mxContainer; //设置在某个容器内拖动 this.LockX = this.options.LockX; //限制水平拖动 this.LockY = this.options.LockY; //限制垂直拖动 this.Noscroll = this.options.Noscroll; this.Onstart = this.options.Onstart; this.Onmove = this.options.Onmove; this.Onstop = this.options.Onstop; this.zIndex = Math.max(this.options.zIndex,Drag.zIndex||0); / extend(this,options||\{\}); if(this.mxContainer&&this.Limit) //设置了限制 和 容器限制后 计算边界直 \{ this.mxLeft = getobjpos(this.mxContainer,1); this.mxTop = getobjpos(this.mxContainer,0); this.mxRight = getobjpos(this.mxContainer,1) + this.mxContainer.offsetWidth-this.\_obj.offsetWidth; this.mxBottom = getobjpos(this.mxContainer,0) + this.mxContainer.offsetHeight-this.\_obj.offsetHeight; \} this.\_obj.style.position = "absolute"; addListener(this.\_obj,"mousedown",BindAsEventListener(this,this.Start)); Drag.zIndex = this.zIndex; \}, Start:function(e)\{ this.\_obj.style.zIndex = ++Drag.zIndex; var self = this; if(this.Noscroll)\{ //设置了不出现滚动条限制后,计算范围 this.mxRight = Math.max(document.body.scrollWidth, document.documentElement.clientWidth)-parseInt($('s').offsetWidth)-2; this.mxBottom = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)-$('s').offsetHeight-2 \} this.\_x = e.clientX - this.\_obj.offsetLeft ; this.\_y = e.clientY - this.\_obj.offsetTop; this.\_marginLeft = parseInt(this.\_obj.style.marginLeft)||0; this.\_marginTop = parseInt(this.\_obj.style.marginTop)||0; if(isIE) \{ addListener(this.\_obj, "losecapture", this.\_fS); this.\_obj.setCapture(); \} else \{ e.preventDefault(); addListener(window, "blur", this.\_fS); \} addListener(document,"mousemove",this.\_fM); addListener(document,"mouseup",this.\_fS); this.Onstart(); \}, Move:function(e)\{ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var iLeft = e.clientX - this.\_x, iTop = e.clientY - this.\_y; if(this.Limit)\{ iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight); iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom); \} var obj = this.custom?this.customobj:this.\_obj; if(!this.LockX)obj.style.left = iLeft - this.\_marginLeft + "px"; if(!this.LockY)obj.style.top = iTop - this.\_marginTop + "px"; this.Onmove(); \}, Stop:function()\{ removeListener(document,'mousemove',this.\_fM); removeListener(document,'mouseup',this.\_fS); if(isIE) \{ removeListener(this.\_obj, "losecapture", this.\_fS); this.\_obj.releaseCapture(); \} else \{ removeListener(window, "blur", this.\_fS); \}; this.Onstop(); \} \}) new Drag($('ss'),\{Limit:true,mxContainer:$('sss')\}); new Drag($('ssss'),\{ custom:true, Onstart:function()\{ var self = this; create('div',document.body,function(elm)\{ self.customobj = elm; with(elm)\{ className="bgdiv1"; style.width=self.\_obj.offsetWidth+'px';style.height=self.\_obj.offsetHeight+'px';style.left=getobjpos(self.\_obj,1)+'px';style.top=getobjpos(self.\_obj,0)+'px'; style.position="absolute"; style.zIndex = ++this.zIndex \} \}) \}, Onstop:function()\{ this.\_obj.style.left = CurrentStyle(this.customobj).left; this.\_obj.style.top = CurrentStyle(this.customobj).top; document.body.removeChild(this.customobj); \}\}); new Drag($('s'),\{Limit:true,Noscroll:true\}); new Drag($('ii'),\{Limit:true,mxContainer:$('iii'),LockY:true\}); new Drag($('wt'),\{ Onstart:function()\{ IsIE?(this.\_obj.style.filter="alpha(opacity:20)"):(this.\_obj.style.opacity=0.2); \}, Onstop:function()\{ IsIE?(this.\_obj.style.filter="alpha(opacity:100)"):(this.\_obj.style.opacity=1); \} \}); </script> </body> </html>