<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. DataTable转任意类型对象List数组-----工具通用类(利用反射和泛型)

    public class ConvertHelper<T> where T : new() { /// <summary> /// 利用反射和泛型 /// </summa ...

  2. base64 与字符串互转

    #region 将Base64编码的文本转换成普通文本 /// <summary> /// 将Base64编码的文本转换成普通文本 /// </summary> /// < ...

  3. 快速修改Matlab默认启动路径(Windows/Mac)

    如何修改Matlab启动路径/Windows or Mac 控制台内输入一下两行命令,之后重启MATLAB即可   newpath = '你所要设定的路径'; userpath(newpath)   ...

  4. UNIX环境高级编程 第8章 进程控制

    本章是UNIX系统中进程控制原语,包括进程创建.执行新程序.进程终止,另外还会对进程的属性加以说明,包括进程ID.实际/有效用户ID. 进程标识 每个进程某一时刻在系统中都是独一无二的,它们之间是用一 ...

  5. Flip Bits

    Determine the number of bits required to flip if you want to convert integer n to integer m. Notice ...

  6. TcxScheduler的使用

    TcxScheduler有两种工作模式: 一.非绑定模式 非绑定模式下,数据被存储在文件系统中.要让scheduler工作在非绑定模式下,应使TcxScheduler.Storage属性绑定到TcxS ...

  7. 一张图教会CSS3倒影

    分享 示例图片 在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了. 这就是今天所要 ...

  8. dragstart drag dragend dragenter dragover dragleave drop

    dragstart drag dragend dragenter dragover dragleave drop   前端框架层出不穷,网页上的效果越来越绚丽,制作绚丽的效果的成本越来越低,其中有种拖 ...

  9. Laravel 程序架构设计思路：使用动作类

    当我们谈论到应用程序的架构的时候,经常会问到一个经典的问题,那就是"这段代码应该放在哪里比较好". 因为 Laravel 是一个相当灵活的框架,所以要回答这个问题其实没那么容易.我 ...

  10. Spark（十四）SparkStreaming的官方文档

    一.SparkCore.SparkSQL和SparkStreaming的类似之处 二.SparkStreaming的运行流程 2.1 图解说明 2.2 文字解说 1.我们在集群中的其中一台机器上提交我 ...