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


Posted in Javascript onApril 04, 2016

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

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

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 #Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 #Javascript
javascript拖拽效果延伸学习
Apr 04 #Javascript
javascript事件委托的用法及其好处简析
Apr 04 #Javascript
基于javascript制作微博发布栏效果
Apr 04 #Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
You might like
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
动态添加option及createElement使用示例
2014/01/26 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python 链接和操作 memcache方法
2017/03/04 Python
python+django加载静态网页模板解析
2017/12/12 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python3实现微型的web服务器
2019/09/03 Python
Python中有几个关键字
2020/06/04 Python
Python如何将装饰器定义为类
2020/07/30 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
新学期班主任寄语
2014/01/18 职场文书
村庄绿化方案
2014/05/07 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年药房工作总结
2015/04/25 职场文书
升职自荐书
2019/05/09 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
python如何为list实现find方法
2022/05/30 Python