JS实现的简易拖放效果示例
本文实例讲述了JS实现的简易拖放效果。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>简易拖放效果</title> </head> <body> <scripttype="text/JavaScript"> <!-- varisIE=(document.all)?true:false;//是否ie var$=function(id){ //返回id对象 return"string"==typeofid?document.getElementById(id):id; }; varClass={ //带构造方法的类 create:function(){ returnfunction(){this.initialize.apply(this,arguments);}//用apply应用下面的initialize初始化属性 } } varExtend=function(destination,source){ //继承 for(varpropertyinsource){ destination[property]=source[property]; } } varBind=function(object,fun){ returnfunction(){ returnfun.apply(object,arguments); } } /** 用object对象调用fun参数是event||windowevent **/ varBindAsEventListener=function(object,fun){ returnfunction(event){ returnfun.call(object,(event||window.event)); } } /** 添加帧听器事件 @oTarget目标对象 @sEventType事件类型 @fnHandler目标触发事件对象 **/ functionaddEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false);//firefox }elseif(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler);//ie }else{ oTarget["on"+sEventType]=fnHandler;//other } }; /** 清除添加的帧听器事件 @oTarget目标对象 @sEventType事件类型 @fnHandler目标触发事件对象 **/ functionremoveEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.removeEventListener){ oTarget.removeEventListener(sEventType,fnHandler,false); }elseif(oTarget.detachEvent){ oTarget.detachEvent("on"+sEventType,fnHandler); }else{ oTarget["on"+sEventType]=null; } }; /*------------------------------相关模型构造完毕-----------------------------------*/ //拖放程序 varSimpleDrag=Class.create(); SimpleDrag.prototype={ //拖放对象,触发对象,初始化 initialize:function(drag){ this.Drag=$(drag); this._x=this._y=0; this._fM=BindAsEventListener(this,this.Move);//_fM方法就是应用MOVE方法参数是event||window.event this._fS=Bind(this,this.Stop);//_fS类方法就是Stop方法 this.Drag.style.position="absolute"; this.Drag.style.cursor="move"; addEventHandler(this.Drag,"mousedown",BindAsEventListener(this,this.Start)); }, //准备拖动 Start:function(oEvent){ this._x=oEvent.clientX-this.Drag.offsetLeft; this._y=oEvent.clientY-this.Drag.offsetTop; addEventHandler(document,"mousemove",this._fM); addEventHandler(document,"mouseup",this._fS); }, //拖动 Move:function(oEvent){ this.Drag.style.left=oEvent.clientX-this._x+"px"; this.Drag.style.top=oEvent.clientY-this._y+"px"; }, //停止拖动 Stop:function(){ removeEventHandler(document,"mousemove",this._fM); removeEventHandler(document,"mouseup",this._fS); } }; //--> </script> <divid="idDrag"style="border:5pxsolid#0000FF;background:#C4E3FD;width:50px;height:50px;"></div> <scripttype="text/javascript"> <!-- newSimpleDrag("idDrag"); //--> </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。