<style>

.test{height: 50px;width: 50px;background-color: pink;position:absolute;}

#test2{left:60px;background-color: lightblue;}

</style>

</head>

<body>

<div id="test1" class="test"></div>

<div id="test2" class="test"></div>

<script>

function Drag(obj){

    this.obj= obj;

}

Drag.prototype.init = function(){

    var that = this;

    this.obj.onmousedown = function(e){

        e = e || event;

        that.fnDown(e);

        document.onmousemove = function(e){

            e = e || event;

            that.fnMove(e);

        }

        document.onmouseup = function(){

            that.fnUp();

        }

        return false;

    }

};

Drag.prototype.fnDown = function(e){

    this.disX = e.clientX - this.obj.offsetLeft;

    this.disY = e.clientY - this.obj.offsetTop;

}

Drag.prototype.fnMove = function(e){

    this.obj.style.left = e.clientX - this.disX + 'px';

    this.obj.style.top = e.clientY - this.disY + 'px';

}

Drag.prototype.fnUp = function(){

    document.onmousemove = document.onmouseup = null;

}

function ChildDrag(obj){

    Drag.call(this,obj);

}

if(!Object.create){

　　Object.create = function(proto){

　　　　function F(){};

　　　　F.prototype = proto;

　　　　return new F;

　　}

}

ChildDrag.prototype = Object.create(Drag.prototype);

ChildDrag.prototype.constructor = ChildDrag;

var drag1 = new Drag(test1);

drag1.init();

ChildDrag.prototype.fnMove = function(e){

    var L = e.clientX - this.disX;

    var T = e.clientY - this.disY;

    if(L < 0){L = 0;}

    if(T < 0){T = 0;}

    this.obj.style.left = L + 'px';

    this.obj.style.top = T + 'px';

}

var drag2 = new ChildDrag(test2);

drag2.init();

</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. 20155209 2016-2017-2 《Java程序设计》第五周学习总结

    20155209 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 try语句用大括号{}指定了一段代码,该段代码可能会抛弃一个或多个例外. catch语句的参 ...

  2. POJ 3783 Balls --扔鸡蛋问题 经典DP

    题目链接 这个问题是谷歌面试题的加强版,面试题问的是100层楼2个鸡蛋最坏扔多少次:传送门. 下面我们来研究下这个题,B个鸡蛋M层楼扔多少次. 题意:给定B (B <= 50) 个一样的球,从 ...

  3. 在springMVC中使用自定义注解来进行登录拦截控制

    1:java注解使用是相当频繁,特别是在搭建一些框架时,用到类的反射获取方法和属性,用的尤其多. java中元注解有四个: @Retention     @Target     @Document  ...

  4. 配置SpringBoot-从日志系统配置说起

    大小系统都需要打日志. 系统在不同环境下对日志的配置要求是不一样的 比如 开发本地: 直接输出到控制台 生产环境: 输出到文件或者额外的日志收集系统, 比如 graylog. (本文不探讨具体日志系统 ...

  5. C++ Primer 5th 第17章 标准库特殊设施

    C++新标准库提供了很多新功能,它们更加强大和易用. tuple类型 tuple是一种类似pair的模板,pair可以用来保存一对逻辑上有关联的元素对.但与pair不同的是,pair只能存储两个成员, ...

  6. mysql使用模板解决旧数据处理,默认初始化数据的通用方法!

    一 业务介绍 先来看看我这得大致业务需求,这次业务比较简单: 即从现在开始,每次new一个爷爷都需要默认初始化给这个爷爷三个儿子(子表,爷爷id去关联),并在初始化每个儿子的同时再给每个儿子初始化若干 ...

  7. html5新增表单元素

    1.验证 <form> <input type="email"></input>    验证邮箱 <input type="ur ...

  8. idea心得

    概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...

  9. docker容器配置独立ip

    一般安装docker后都会通过端口转发的方式使用网络,比如 “-p 2294:22” 就将2294抓发到22端口来提供sftp服务,这样使用起来没有问题.但端口号很难记忆,如果前边有nginx等抓发工 ...

  10. 洛谷P1782 旅行商的背包

    传送门啦 这个题不用二进制优化的话根本不行,现学的二进制优化,调了一段时间终于A了,不容易.. 如果不懂二进制优化的话可以去看我那个博客 二进制优化多重背包入口 不想TLE,不要打memset,一定要 ...