前面的话

　　在之前的博客中，拖拽的实现使用了面向过程的写法。本文将以面向对象的写法来实现拖拽

写法

<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动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  2. javascript面向对象系列第五篇

    <style> .test{height: 50px;width: 50px;background-color: pink;position:absolute;} #test2{left: ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. JS实现 类似图片3D效果

    其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路.效果如下: 可 ...

  2. 浅谈 DNS

    一.DNS(Domain Name System,域名系统) 概念:万维网(WWW是环球信息网的缩写,亦作“Web”.“WWW”.“'W3'”,英文全称为“World Wide Web”),作为域名和 ...

  3. （转）公有云vr客户端tcp连接数太多造成 系统卡顿问题 [bittorrent tracker优化] -公有云常见网络问题及思路

    在公有云服务器 发现使用tcp(http)的tracker连接数太多 用户太多会造成windows系统卡顿 特此发表一下修改配置和路由器的方法 解决卡顿问题 解决方法1(参考内容): 修改 /etc/ ...

  4. 学习C#(一)

    赶紧好好学学自己的C#,,要不然要给做的东西说拜拜了,,,时间紧迫,,,真担心会食言..................... 在C#中以为只要类有构造方法,,,,原来结构也有 using Syste ...

  5. nrf52832 连接参数更新过程

    ble 连接参数更新过程如下: 一般分三个过程 一 .主机发起连接(带有一个连接参数,一般都是 7.5ms) 二.主机更新连接参数 (举例:NRF CONNECT 安卓app软件 45ms). 三.从 ...

  6. 希尔排序算法的php实现

    虽然现在各种程序语言都有其各自强大的排序库函数,但是这些底层实现也都是利用这些基础或高级的排序算法. 理解这些复杂的排序算法还是很有意思的,体会这些排序算法的精妙~ 一.希尔排序(shell sort ...

  7. Flask安装教程

    第1步:确保本机已经安装有python,下载easy_install到本地某一目录,双击ez_setup.py,python将自动下载到python安装目录/Scripts 下面,然后在系统环境变量的 ...

  8. SVN之 trunk, branches and tags意义

    --简单的对照 SVN的工作机制在某种程度上就像一颗正在生长的树: 一颗有树干和很多分支的树 分支从树干生长出来.而且细的分支从相对较粗的树干中长出 一棵树能够仅仅有树干没有分支(可是这样的情况不会持 ...

  9. TFS2012独占签出设置

    说明:TFS2012默认是可以多人签出同一个文件.如果要设为独占签出,请看下面操作步骤 1. 2. 3. 然后选择工作区---编辑---高级.最后如下图,在位置那里选择服务器. END

  10. Django中的cookie和session

    前言 HTTP协议 是短连接.且状态的,所以在客户端向服务端发起请求后,服务端在响应头 加入cokie响应给浏览器,以此记录客户端状态: cook是来自服务端,保存在浏览器的键值对,主要应用于用户登录 ...