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

这篇文章主要为大家详细介绍了js拖拽的原型声明和用法总结,感兴趣的朋友可以参考一下

下面是自己写的一个关于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=\ <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=\</div>

<div id=\</div> </body> </html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4