js拖拽的原型声明和用法总结.docVIP

js拖拽的原型声明和用法总结 这篇文章主要为大家详细介绍了 js拖拽的原型声明和 用法总结，感兴趣的朋友可以参考一下 下面是自己写的一个关于js的拖拽的原型声明：代码 如下 需要注意的问题包括： 1. this的指向到底是指向谁一弄清楚所指的对象 2. call 0方法的使用 3.直接将父级原型赋给子级与使用for将其赋给子级 有什么区别？ 比如： 代码如下： for (variinDrag. prototype) i nbsp;LimitD rag. prototy pe[i]=Drag. prototype[i :; 子级发生改变，其父级并不会受 到影响 } n bsp;LimitDr ag. prototyp e=Drag. prot otype； ——直接将原型赋给子级，会导致当子级发生改变时，其 父级也会随之而改变。 代码如下： It ;htmlgt: lt;headgt; lt;s tylegt; 林d ivl{width:1 OOpx:height :100px;back ground:red; position:ab solute:} #div2{width:lOOpx;heigh t:100px;bac kground:yel low; pos it io n: absolute;} lt;/styleg t; It;meta http~equiv= Content-Ty pe〃content= 〃text/html; charset=utf -8〃/gt; It ;titlegt;拖拽一面向对象 It;/t itlegt; It; s criptgt; w indow. onloa d=function() { nbsp;ne wDragC divl ’)； nbsp;n ewLimitDrag (’ div2’)； } f unctionDrag (id) { nbsp :nbsp; var_t his=this;//这个 this 表示 pi nbsp;nbsp;this. disx=0 : nbsp;nbs p; this, disy =0; nbsp;n bsp;this.oD iv=document .getElement Byld(id); nbsp;nbsp;t his.oDiv. on mousedown=f unction(ev) {//按下的时候有个事件，传递给下面的事件 nbsp;nbsp;_this. fnDow n(ev); nbs p;nbsp;retu rnfalse; nbs p;nbsp;} } ；n bsp; Drag, prototype, f nDown=funct ion (ev) { n bsp;nbsp; va r_this=this ; nbsp;nbs p; varoEvent =ev | | event; nbsp;nbsp : this. disx= oEvent. die ntX-this. oD iv. offsetLe ft; nbsp;n bsp;this, di sy=oEvent. c lientY- this . oDiv. offse tTop; nbsp :nbsp;docum ent.onmouse move=functi on(ev) {//移动的时候有个事件 nb sp;nbsp;nbs p;nbsp;_thi s. fnMove (ev ); nbsp;nbsp :} nbsp;nb sp: document . onmouseup=function() { nbsp;nbsp :nbsp;nbsp;_this. fnUpO ; nbsp;nbsp :} }:nbsp; nbsp;Drag. p rototype. fn Move=functi on(ev) { nb sp; nbsp; nbs p; varoEvent =ev| | event; nbsp:nbsp :nbsp;this. oDiv. style. left=oEvent . clientX-th is. disx+’ px ’ ； nbsp:nb sp;nbsp;thi s. oDiv. styl e. top=oEven t. clientY-1 his. disy+’ p x’ ； }; Drag . prototype. fnUp=functi on () { nbsp :nbsp;nbsp;document, on mousemove=n ull: nbsp;nbsp;nbsp; d ocument. onm ouseup=null : }; //继承Drag的所有属性 func tionLimitDr ag(id) { nb sp;nbsp;D