封装的一个JS拖拽效果,兼容所有主流浏览器

很实用的一个JS效果,经过多次改进,效率和兼容都还行.

 

JS代码:

 /* *名称:oMouseDrag *用途:鼠标拖拽浮动; *参数说明: *add(id1,id2,options): (添加拖拽对像) id1:为感应拖拽的元素 id2:实际移动的元素 options:参看options方法; *使用方法: *var tuodong = new oMouse_drag(); *tuodong.add("div_head","div_box",{ * auto:false, //是否感应边界(默认为false) * onPlay:function(){document.title="开始移动"}, //拖动前执行 * onOver:function(){document.title="结束移动";} //结束拖动执行 *} *********************************************** *使用请保留作者信息:含浪 mail:[email protected] * *********************************************** */ var oMouseDrag=function(options){ this.setOptions(options); this.info(); }; oMouseDrag.prototype={ g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;}, ae:function(el,type,call) { if(el.addEventListener){ el.addEventListener(type,call,false); }else{ el.attachEvent("on"+type,call); }; }, Mouse_Obj:"none",_x:0,_y:0, oMouse:function(e){ if(e.pageX || e.pageY){ return {x:e.pageX-(document.documentElement.scrollLeft+document.body.scrollLeft), y:e.pageY-(document.documentElement.scrollTop+document.body.scrollTop)}; }else{//IE return{x:e.clientX - document.documentElement.clientLeft,y:e.clientY - document.documentElement.clientTop}; }; }, setOptions:function(options){ this.options={ fuDiv:document.documentElement } for(var o in options){ this.options[o]=options[o]; }; this.fuDiv = this.g(this.options.fuDiv); }, move:function(e,id){ var oM=this.oMouse(e||window.event); this.Mouse_Obj=this.g(id); this._x=parseInt(this.Mouse_Obj.offsetLeft)-(oM.x+(document.documentElement.scrollLeft+document.body.scrollLeft)); this._y=parseInt(this.Mouse_Obj.offsetTop)-(oM.y+(document.documentElement.scrollTop+document.body.scrollTop)); }, over:function(){ this.Mouse_Obj="none"; }, info:function(){ var o = this; o.ae(document.documentElement,"mousemove",function(e){ if(o.Mouse_Obj!=="none"){ var oM = o.oMouse(e||window.event); var to_x = o._x+(oM.x+(document.documentElement.scrollLeft+document.body.scrollLeft)) var to_y = o._y+(oM.y+(document.documentElement.scrollTop+document.body.scrollTop)) if(o.Mouse_Obj.auto){ var min_x = (document.documentElement.scrollLeft+document.body.scrollLeft); var max_x = document.documentElement.clientWidth-o.Mouse_Obj.offsetWidth + (document.documentElement.scrollLeft+document.body.scrollLeft); var min_y = (document.documentElement.scrollTop+document.body.scrollTop);; var max_y = document.documentElement.clientHeight-o.Mouse_Obj.offsetHeight + (document.documentElement.scrollTop+document.body.scrollTop); to_x = max_x>0?to_xmax_x?max_x:to_x:to_x; to_y = max_y>0?to_ymax_y?max_y:to_y:to_y; }; o.Mouse_Obj.style.left=to_x+'px'; o.Mouse_Obj.style.top=to_y+'px'; e.returnValue=false; }; }); o.ae(document,"mouseup",function(){ var tempf=eval(o.Mouse_Obj.over) try{tempf()}catch(e){}; o.over(); }) }, add:function(id1,id2,options) { var o = this; var id_m = this.g(id1); var id_y = this.g(id2); var options_temp={ auto:false, onPlay:function(){}, onOver:function(){} }; for(var of in options){ options_temp[of]=options[of]; }; o.ae(id_m,"mousedown",function(event){options_temp.onPlay(); o.move.call(o,event,id2);}); id_y.over = options_temp.onOver; id_y.auto = options_temp.auto; } }

 

调用方式:

 

 

标 题

感应边界

sdfsdf
sdfsdf
sdf
sdf
fffffffffffffff

sfsF
sD
fSD
f
sdf
sdf
f
sd