封装的一个JS拖拽效果,兼容所有主流浏览器_拖拽效果和封装拖拽效果有啥区别-CSDN博客

本文链接：https://blog.csdn.net/why_aircraft/article/details/5632651

很实用的一个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:w.why@163.com * *********************************************** */ 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_x<min_x?min_x:to_x>max_x?max_x:to_x:to_x; to_y = max_y>0?to_y<min_y?min_y:to_y>max_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; } }

调用方式:

<!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>鼠标拖动</title> <mce:script type="text/javascript" src="oMouseDrag.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body style="margin:10px; padding:10px;" mce_style="margin:10px; padding:10px;"> <div id="yidong" style="top:100px;position:absolute;background-color:#999;width:400px; height:230px; z-index:10;"> <div id="y" style="background-color:#333;color:#00F;height:30px;line-height:30px;font-size:16px;text-align:center;cursor: move;">标题</div> </div> <div id="yidong1" style="top:0; left:0;position:absolute;background-color:#999;width:400px;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#000000,strength=20); z-index:9;"> <div id="y1" style="background-color:#333;color:#FFF;height:30px;line-height:30px;font-size:16px;text-align:center;cursor: move;">感应边界</div> sdfsdf<br /> sdfsdf<br /> sdf<br /> sdf<br /> fffffffffffffff<br /> </div> <div id="main"> <br /> <br /> sfsF<br /> sD<br /> fSD<br /> f<br /> sdf<br /> sdf <br /> f<br /> sd<br /> </div> </body> </html>