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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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 正则匹配函数体
2009/08/25 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
前端必学之PHP语法基础
2016/01/01 PHP
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python基础之入门必看操作
2017/07/26 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Php多进程实现代码
2018/05/07 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python之信息加密题目详解
2019/06/26 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
国防教育标语
2014/10/08 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang