js的拖动效果

scomouse

浏览: 14675 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

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

<!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;" onmousedown="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>

分享到：