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

更新时间：2016年04月04日 11:31:23 作者：向婷风

这篇文章主要为大家详细介绍了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="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>

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

您可能感兴趣的文章:

await Streaking解决原理示例详解
这篇文章主要为大家介绍了await Streaking解决原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
深入浅出聊一聊js中的'this'关键字
js中的this关键字平时在开发中使用时倒是也能正常应用,但是对其使用和判断并不能信手拈来,所以下面这篇文章主要给大家介绍了关于js中this关键字的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
JS动态加载当前时间的方法
这篇文章主要介绍了JS动态加载当前时间的方法,涉及html的onload方法及javascript操作时间的技巧,需要的朋友可以参考下
2015-02-02
js正则表达exec与match的区别说明
本篇文章主要是对js正则表达exec与match的区别进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JavaScript Event学习第三章早期的事件处理程序
在这一章我会谈到一些最古老的添加事件处理程序的方法，这些方法甚至被第二代浏览器所支持。
2010-02-02
Bootstrap 源代码分析(未完待续)
这篇文章主要为大家详细分析了Bootstrap部分源代码，先提供给大家学习，感兴趣的小伙伴们可以参考一下
2016-08-08
微信小程序3D轮播实现代码
这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
js运算符的一些特殊用法
这篇文章主要介绍了js运算符的一些特殊用法,需要的朋友可以参考下
2018-07-07
div浮层,滚动条移动,位置保持不变的4种方法汇总
这篇文章主要是对div浮层,滚动条移动,位置保持不变的4种方法进行了汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
javascript实现点亮灯泡特效示例
这篇文章主要介绍了javascript实现点亮灯泡特效示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10