前面的话

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

写法

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

    × 目录 [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. 报错Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA

    解决方法:import os                  os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'输入1:显示所有信息 2:只显示warning和erro ...

  2. 带你看懂大数据采集引擎之Flume&采集目录中的日志

    一.Flume的介绍: Flume由Cloudera公司开发,是一种提供高可用.高可靠.分布式海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于采集数据:同时,flum ...

  3. 关于docker构建镜像

    今天正好看到这一块了,记录一下,希望可以帮助到大家. 构建Dockerfile 先来看一个示例: --------------------------------------------------- ...

  4. 如何判断Android设备是否为模拟器

    android.os.Build.BRAND:获取设备品牌 如果获取的Landroid/os/Build;->BRAND的值为 "generic"则为模拟器上运行. andr ...

  5. Libgdx学习记录14——数据保存Preferences，XmlReader

    在游戏过程过程中,常常需要对某些数据进行保存,以确保下次运行时能够正确读取.如游戏中的金币.道具.游戏分数.已通过的关卡等. Libgdx中常用的数据保存方式有Preferences和XmlReade ...

  6. H5——video百花齐放（浏览器自带的播放器）

    前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...

  7. C#对战小游戏，持续更新（里面暂无内容，标记插眼）

    做的乱七八糟的 很明显的一点,对集合.数组.类的理解和运用   很差.很差.很差 今儿不做了,马德,头都肿大了 休息一下,捋一捋

  8. 【分享】20个非常有用的Java程序片段

    福利来啦!!! 刚看到的一篇好东东,分享给大家,这些代码留着哦,以后会用得着的... 原文地址:http://developer.51cto.com/art/201306/398347.htm 1. ...

  9. TensorFlow训练MNIST数据集（1） —— softmax 单层神经网络

    1.MNIST数据集简介 首先通过下面两行代码获取到TensorFlow内置的MNIST数据集: from tensorflow.examples.tutorials.mnist import inp ...

  10. jenkins pipeline 部署

    一.git 版本控制结合jenkins 发布 sh-4.2$ git branch sh-4.2$ git chekout master sh-4.2$ git tag v1.1 sh-4.2$ gi ...