javascript面向对象系列第五篇——拖拽的实现
前面的话
在之前的博客中，拖拽的实现使用了面向过程的写法。本文将以面向对象的写法来实现拖拽
写法
<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面向对象系列第五篇——拖拽的实现的更多相关文章
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- javascript面向对象系列第五篇
<style> .test{height: 50px;width: 50px;background-color: pink;position:absolute;} #test2{left: ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
- javascript面向对象系列第四篇——OOP中的常见概念
前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...
- 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...
- 深入理解javascript作用域系列第五篇
前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相 ...
随机推荐
- JavaScript HTML DOM,BOM
DOM DOM 是一个 W3C (万维网联盟) 标准. DOM 定义了用于访问文档的标准: "W3C 文档对象模型 (DOM) 是一个平台和与语言无关的界面, 允许程序和脚本动态访问和更新文 ...
- php删除文件夹和其下的内容
原文地址:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/05/13/2045158.html <?php function del ...
- gdb中信号
信号(Signals) 信号是一种软中断,是一种处理异步事件的方法.一般来说,操作系统都支持许多信号.尤其是UNIX,比较重要应用程序一般都会处理信号.UNIX定义了许 多信号,比如SIGINT表示中 ...
- python下安装lxml
首先在环境变量path中添加:C:\Python27\Scripts 然后打开cmd命令窗口,输入以下命令: easy_install virtualenv easy_install lxml 这样 ...
- 20155308 《网络攻防》 Exp2 后门原理与实践
20155308 <网络攻防> Exp2 后门原理与实践 学习内容:使用nc实现win,mac,Linux间的后门连接 :meterpraeter的应用 :MSF POST 模块的应用 学 ...
- 内存和CPU资源控制
数据库系统的资源是指内存和CPU(处理器)资源,拥有资源的多寡,决定了数据查询的性能.当一个SQL Server实例上,拥有多个独立的工作负载(workload)时,使用资源管理器(Resource ...
- Android Studio Xposed模块编写（二）
阅读本文前,假设读者已经看过Android Studio Xposed模块编写(一) 相关环境已经搭建完成.本文演示案例与上文环境一致,不在赘述. 1.概述 Xposed是非常牛叉的一款hook框架 ...
- 如何设计一个异步Web服务——接口部分
需求比较简单,提供一个异步Web服务供使用者调用.比如说,某应用程序需要批量地给图片加lomo效果.由于加lomo效果这个操作非常消耗CPU资源,所以我们需要把这个加lomo效果的程序逻辑放到一台单独 ...
- C#图片处理(转zhjzwl/archive)
基本原理: 获取每一个像素值,然后处理这些每一个像素值. 原始图片: ISINBAEVA ~~~~~~~~ 一. 底片效果 原理: GetPixel方法获得每一点像素的值, 然后再使用SetPix ...
- Katalon Studio学习笔记(二)——请求响应中文乱码解决方法
Katalon Studio接口测试发现返回的中文消息是乱码,这是因为KS的编码格式是UTF-8,因此导致中文字体出现乱码.如下图所示: 在我们的系统中添加一个名字为JAVA_TOOL_OPTIONS ...