1. <style>
  2. .test{height: 50px;width: 50px;background-color: pink;position:absolute;}
  3. #test2{left:60px;background-color: lightblue;}
  4. </style>
  5. </head>
  6. <body>
  7. <div id="test1" class="test"></div>
  8. <div id="test2" class="test"></div>
  9. <script>
  10. function Drag(obj){
  11.     this.obj= obj;
  12. }
  13. Drag.prototype.init = function(){
  14.     var that = this;
  15.     this.obj.onmousedown = function(e){
  16.         e = e || event;
  17.         that.fnDown(e);
  18.         document.onmousemove = function(e){
  19.             e = e || event;
  20.             that.fnMove(e);
  21.         }
  22.         document.onmouseup = function(){
  23.             that.fnUp();
  24.         }
  25.         return false;
  26.     }
  27. };
  28. Drag.prototype.fnDown = function(e){
  29.     this.disX = e.clientX - this.obj.offsetLeft;
  30.     this.disY = e.clientY - this.obj.offsetTop;
  31. }
  32. Drag.prototype.fnMove = function(e){
  33.     this.obj.style.left = e.clientX - this.disX + 'px';
  34.     this.obj.style.top = e.clientY - this.disY + 'px';
  35. }
  36. Drag.prototype.fnUp = function(){
  37.     document.onmousemove = document.onmouseup = null;
  38. }
  39. function ChildDrag(obj){
  40.     Drag.call(this,obj);
  41. }
  42. if(!Object.create){
  43. 　　Object.create = function(proto){
  44. 　　　　function F(){};
  45. 　　　　F.prototype = proto;
  46. 　　　　return new F;
  47. 　　}
  48. }
  49. ChildDrag.prototype = Object.create(Drag.prototype);
  50. ChildDrag.prototype.constructor = ChildDrag;
  51. var drag1 = new Drag(test1);
  52. drag1.init();
  53. ChildDrag.prototype.fnMove = function(e){
  54.     var L = e.clientX - this.disX;
  55.     var T = e.clientY - this.disY;
  56.     if(L < 0){L = 0;}
  57.     if(T < 0){T = 0;}
  58.     this.obj.style.left = L + 'px';
  59.     this.obj.style.top = T + 'px';
  60. }
  61. var drag2 = new ChildDrag(test2);
  62. drag2.init();
  63. </script>

javascript面向对象系列第五篇的更多相关文章

  1. javascript面向对象系列第五篇——拖拽的实现

    前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...

  2. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  3. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  4. javascript面向对象系列第四篇——OOP中的常见概念

    前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...

  5. 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...

  6. 深入理解javascript作用域系列第五篇

    前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相 ...

  7. 前端学PHP之面向对象系列第五篇——对象操作

    × 目录 [1]对象克隆 [2]对象比较[3]对象串行化[4]json 前面的话 本文主要介绍面向对象中的一些对象操作 对象克隆 对象复制,又叫对象克隆,可以通过 clone 关键字来完成 在多数情况 ...

  8. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  9. javascript动画系列第五篇——模拟滚动条

    × 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...

随机推荐

  1. virtual Box在Centos 7上的安装

    1.首先,我们需要在oracle官网下载virtual Box的centos7版本: 下载地址为:http://download.virtualbox.org/virtualbox/5.0.12/Vi ...

  2. Django 基础命令

  3. 一个diff工具，用于判断两个目录下所有的改动(比较新旧版本文件夹)

    需求: 编写一个diff工具,用于判断两个目录下所有的改动 详细介绍: 有A和B两个目录,目录所在位置及层级均不确定 需要以B为基准找出两个目录中所有有改动的文件(文件或内容增加.修改.删除),将有改 ...

  4. 解决java计算中double类型结果不一致问题,使用BigDecimal解决

    一.需求:从数据表中读出一个double的数据,比如是3.5,没问题,但是如果再用3.5进行计算,比如乘以100,结果就是350了,而是35000000004 因为是浮点运算,所有语言中的浮点数都会有 ...

  5. 【杂谈】需要mark的一些东西

    https://riteme.github.io/blog/2017-10-28/oi-coding-guidelines.html https://www.luogu.org/blog/34238/ ...

  6. 正则表达式&自定义异常 典型案例

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test { public static vo ...

  7. iframe 同域下父子页面的通信

    //共同引用的JS文件 common.js ; (function (window, $) { $(function ($) { window.trip = window.trip || {}; wi ...

  8. Dapper实用教程

    Dapper是什么? Dpper是一款.Net平台简单(Simple)的对象映射库,并且Dapper拥有着“微型ORM之王”的称号.就速度而言与手写ADO.NET SqlDateReader相同.OR ...

  9. HTTP之一 If-Modified-Since & If-None-Match

    If-Modified-Since & If-None-MatchIf-Modified-Since,和 Last-Modified 一样都是用于记录页面最后修改时间的 HTTP 头信息,只是 ...

  10. Flask：静态文件&模板（0.1）

    Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2 前面看了Flask的Quickstart文档,可是,一直没有练习里面的内容,这不,刚刚练习完毕,来写篇博文记录一下! ...