这篇文章主要为大家详细介绍了 js 拖拽的原型声明和用法总结,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面是自己写的一个关于 js 的拖拽的原型声明:代码如下
需要注意的问题包括:
1.this 的指向到底是指向谁 -- 弄清楚所指的对象
2.call() 方法的使用
3. 直接将父级原型赋给子级与使用 for 将其赋给子级有什么区别?
比如:
- for(var i in Drag.prototype)
- {
- LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响
- }
- LimitDrag.prototype=Drag.prototype;---------直接将原型赋给子级,会导致当子级发生改变时,其父级也会随之而改变。
代码如下
- <html>
- <head>
- <style>
- #div1 {width:100px; height:100px; background:red; position:absolute;}
- #div2 {width:100px; height:100px; background:yellow; position:absolute;}
- </style>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>拖拽--面向对象</title>
- <script>
- window.onload=function()
- {
- new Drag('div1');
- new LimitDrag('div2');
- }
- function Drag(id)
- {
- var _this=this;//这个this表示p1
- this.disx=0;
- this.disy=0;
- this.oDiv=document.getElementById(id);
- this.oDiv.onmousedown=function(ev){//按下的时候有个事件,传递给下面的事件
- _this.fnDown(ev);
- return false;
- }
- };
- Drag.prototype.fnDown=function(ev)
- {
- var _this=this;
- var oEvent=ev||event;
- this.disx=oEvent.clientX-this.oDiv.offsetLeft;
- this.disy=oEvent.clientY-this.oDiv.offsetTop;
- document.onmousemove=function(ev){//移动的时候有个事件
- _this.fnMove(ev);
- }
- document.onmouseup=function(){
- _this.fnUp();
- }
- };
- Drag.prototype.fnMove=function(ev)
- {
- var oEvent=ev||event;
- this.oDiv.style.left=oEvent.clientX-this.disx+'px';
- this.oDiv.style.top=oEvent.clientY-this.disy+'px';
- };
- Drag.prototype.fnUp=function()
- {
- document.onmousemove=null;
- document.onmouseup=null;
- };
- //继承Drag的所有属性
- function LimitDrag(id)
- {
- Drag.call(this,id);//这个this指LimitDrag new的对象
- }
- //得到Drag的方法,遍历其原型
- for(var i in Drag.prototype)
- {
- LimitDrag.prototype[i]=Drag.prototype[i];
- }
- //改变Drag的fnMove的方法
- LimitDrag.prototype.fnMove=function(ev)
- {
- var oEvent=ev||event;
- var l=oEvent.clientX-this.disx;
- var t=oEvent.clientY-this.disy;
- if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
- {
- l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
- }
- else if(l<0)
- {
- l=0;
- }
- if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
- {
- t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
- }
- else if(t<0)
- {
- t=0;
- }
- this.oDiv.style.left=l+'px';
- this.oDiv.style.top=t+'px';
- }
- </script>
- </head>
- <body>
- <div id="div1">
- </div>
- <div id="div2">
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0218/266425.html