前端基础进阶（十）：面向对象实战之封装拖拽对象

https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/

说明：此处只是记录阅读前端基础进阶的理解和总结，如有需要请阅读上面的链接

1.如何让元素动起来

要让元素动起来就要修改元素的top、left 、translate 属性。因为使用top、left会使页面重绘，而translate不会，所以从性能上一般优先使用translate。另外因为translate是transform的一个用法，而transform是css3中的所以需要判断一下浏览器是否支持，不同的浏览器写法大概有几种

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']
  //判断当前浏览器支持哪种transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的浏览器大概支持如下几种transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}

2.获取元素初始位置

 //获取目标元素样式function getStyle(elem, property) {//ie 通过currentStyle获取样式，其他浏览器通过getComputedStyle,getComputedStyle是一个方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//获取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {console.log(transformValue);var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}

设置元素位置

//设置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}

3.事件

拖拽的原理：mousedown记录元素和鼠标的初始位置，添加mousemove、mouseup事件，mousemove事件随着鼠标移动获取鼠标当前位置。移动后的鼠标位置-鼠标的初始位置=移动后的元素位置-元素的初始位置，如果用diss表示移动后的鼠标位置-鼠标的初始位置，那么元素移动后的位置=元素的初始位置+diss。这样在鼠标移动时就可以得到元素的位置。mouseup移除mousemove、mouseup事件和做其他处理

    function start(event) {startX = event.pageX; //获取鼠标初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

 

完整的js代码

 var oElem = document.getElementById("div1"); //document.getElementById("div1")必须在元素加载完成后才能获取到元素，所以这个JavaScript必须放在body后，否则返回nullvar startX = 0;var startY = 0;var sourceX = 0;var sourceY = 0;oElem.addEventListener('mousedown', start, false);//获取目标元素样式function getStyle(elem, property) {//ie 通过currentStyle获取样式，其他浏览器通过getComputedStyle,getComputedStyle是一个方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//判断当前浏览器支持哪种transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的浏览器大概支持如下几种transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}//获取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}//设置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}function start(event) {startX = event.pageX; //获取鼠标初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

 

我们可以把以上代码封装到一个模块里面，使用的时候只要传元素Id就可以了。

;(function () {var transform = getTransform();//构造函数function Drag(selector) {this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);this.startX = 0;this.startY = 0;this.sourceX = 0;this.sourceY = 0;this.init();//初始化
        }//原型Drag.prototype = {constructor: Drag,init: function () { this.setDrag(); },//获取目标元素样式getStyle: function (property) {//ie 通过currentStyle获取样式，其他浏览器通过getComputedStyle,getComputedStyle是一个方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];},//获取元素的初始位置getTargetPos: function () {var pos = { x: 0, y: 0 };if (transform != "") {var transformValue = this.getStyle(transform);if (transformValue == 'none') {this.elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (this.getStyle(this.elem, 'position') == 'static') {this.elem.style.position = 'relative';return pos;} else {var x = parseInt(this.getStyle('left') ? this.getStyle('left') : 0);var y = parseInt(this.getStyle('top') ? this.getStyle('top') : 0);return pos = {x: x,y: y};}}},//设置元素位置setTargetPos: function (pos) {if (transform != "") {this.elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {this.elem.style.left = pos.x + "px";this.elem.style.top = pos.y + "px";}},setDrag: function () {var self = this;//因为绑定的方法是独立执行的，this指向并不是Drag对象，所以必须使用闭包this.elem.addEventListener('mousedown', start, false);function start(event) {self.startX = event.pageX; //获取鼠标初始位置self.startY = event.pageY;var pos = self.getTargetPos();self.sourceX = pos.x;self.sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - self.startX;var distanceY = currentY - self.startY;self.setTargetPos({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}}}// 私有方法，仅仅用来获取transform的兼容写法function getTransform() {var transform = '',divStyle = document.createElement('div').style,transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],i = 0,len = transformArr.length;for (; i < len; i++) {if (transformArr[i] in divStyle) {return transform = transformArr[i];}}return transform;}window .Drag=Drag;//对外暴露构造方法
    })();new Drag('div1');//拖拽实例

 

转载于:https://www.cnblogs.com/lidaying5/p/9100601.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/397860.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iOS - LocalCache 本地数据缓存

iOS - LocalCache 本地数据缓存

1、自定义方式本地数据缓存 1.1 自定义缓存 1 沙盒路径下的 Library/Caches 用来存放缓存文件&#xff0c;保存从网络下载的请求数据&#xff0c;后续仍然需要继续使用的文件&#xff0c;例如网络下载的离线数据&#xff0c;图片&#xff0c;视频文件等。该目录中的文件系统不会…
阅读更多...
如何构建ASP.NET MVC4JQueryAJaxJSon示例

如何构建ASP.NET MVC4JQueryAJaxJSon示例

背景&#xff1a; 博客中将构建一个小示例&#xff0c;用于演示在ASP.NET MVC4项目中&#xff0c;如何使用JQuery Ajax。 直接查看JSon部分 步骤&#xff1a; 1&#xff0c;添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如…
阅读更多...
echarts 有引导线和内部文字_点、线、面构图的异同以及相互转化

echarts 有引导线和内部文字_点、线、面构图的异同以及相互转化

点、线、面构图既有相似性&#xff0c;又有差异性。相似的是都有对齐、强调、群组、重复、突出层次的作用&#xff0c;不同的是点的特点是聚焦、线的特点是运动和方向性&#xff0c;面的特性是体量感、稳定性。点的情感最弱&#xff0c;线、面的情感要比点丰富。一、点、线、面…
阅读更多...
c语言上机报告之水仙花数,C语言上机报告之水仙花数..doc

c语言上机报告之水仙花数,C语言上机报告之水仙花数..doc

C语言上机报告之水仙花数.C语言程序设计上机报告课题名称&#xff1a;水仙花数的算法院 (系)&#xff1a;工程学院专业班 级&#xff1a; 052126学生姓名&#xff1a; 喻培学 号&#xff1a; 20121004040指导教师&#xff1a; 熊慕舟2013年11月24日C语言上机报告之水仙花数上机…
阅读更多...
《Python黑帽子：黑客与渗透测试编程之道》 Web攻击

《Python黑帽子：黑客与渗透测试编程之道》 Web攻击

Web的套接字函数库&#xff1a;urllib2 一开始以urllib2.py命名脚本&#xff0c;在Sublime Text中运行会出错&#xff0c;纠错后发现是重名了&#xff0c;改过来就好&#xff1a; #!/usr/bin/python #codingutf-8 import urllib2url "http://www.baidu.com"headers …
阅读更多...
vCenter Converter Standalone使用文档

vCenter Converter Standalone使用文档

文档目的能够使用vCenter Converter Standalone 将物理机操作系统迁移到虚拟机操作系统基础知识vCenter Converter Standalone 能将物理机上的操作系统、VMware虚拟机上的操作系统或者Hype-V 上的虚拟机操作系统迁移到VMware上。系统环境操作系统&#xff1a;Windows Server 20…
阅读更多...
1093芯片做正弦波逆变器_正弦波逆变器中的SPWM调制（钟任生）

1093芯片做正弦波逆变器_正弦波逆变器中的SPWM调制（钟任生）

欢迎加入技术交流QQ群(2000人)&#xff1a;电力电子技术与新能源 905723370高可靠新能源行业顶尖自媒体在这里有电力电子、新能源干货、行业发展趋势分析、最新产品介绍、众多技术达人与您分享经验&#xff0c;欢迎关注我们&#xff0c;搜索微信公众号&#xff1a;电力电子技术…
阅读更多...
android 手机短信恢复,安卓手机短信删除了怎么恢复？简单恢复的方法

android 手机短信恢复,安卓手机短信删除了怎么恢复？简单恢复的方法

原标题&#xff1a;安卓手机短信删除了怎么恢复&#xff1f;简单恢复的方法安卓手机短信删除了怎么恢复&#xff1f;手机短信是生活中不经常使用到&#xff0c;但是依然是十分重要的存在&#xff0c;因为我们现在比较喜欢用社交软件与别人进行交流&#xff0c;但是在一些相对重…
阅读更多...
Oracle-查看oracle是否有表被锁

Oracle-查看oracle是否有表被锁

问题现象&#xff1a; 查看oracle是否有表被锁 解决方法&#xff1a; select sid,serial#,program,terminal,username,b.object_id,c.object_name from v$session a, v$locked_object b, dba_objects c where a.sid b.session_id and b.object_id c.object_id;转载于:http…
阅读更多...
Python循环的一些基本练习

Python循环的一些基本练习

#1:# name input(请输入你的身份)# if name egon:# print(--> 超级管理员)# elif name tom:# print(--> 普通管理员)# elif name jack,rain:# print(--> 业务主管)# elif name 其他:# print(--> 普通用户)#2# today input(今天是星期几&…
阅读更多...
bash下个人习惯的一些文件设置

bash下个人习惯的一些文件设置

2019独角兽企业重金招聘Python工程师标准>>> bash_profile export PATH/usr/local/bin:$PATH export EDITORviinputrc set editing-mode vi #set editing-mode emacs set show-all-if-ambiguous on set completion-ignore-case on set meta-flag on set conver…
阅读更多...
docker打包镜像上传_Jenkins | 一键打包部署Spring Boot 应用的Docker镜像

docker打包镜像上传_Jenkins | 一键打包部署Spring Boot 应用的Docker镜像

一、前言1、本文主要内容将在项目中实际使用到的相关东西整理记录一波&#xff0c;同时可以方便其他同学在使用到的时候参考一下(自己也备忘)&#xff0c;有不对的地方&#xff0c;欢迎指出~~Docker部署SpringBoot 项目通用Dockerfile文件、脚本Jenkins新建任务图文详解3、本文…
阅读更多...
android 发送短信 广播 demo,向Android模拟器打电话发短信的简单方法

android 发送短信 广播 demo,向Android模拟器打电话发短信的简单方法

在开发android应用程序时&#xff0c;有时候需要测试一下向android手机拨打电话发送短信时该应用程序的反应。譬如编写一个广播接收器&#xff0c;来提示用户有短信收到或者处理短信&#xff0c;就需要向该手机发送短信来进行测试。这里介绍一种简单的向android模拟器打电话发短…
阅读更多...
android 隐藏键盘时ui延迟恢复,android 软键盘的显示与隐藏问题的研究

android 隐藏键盘时ui延迟恢复,android 软键盘的显示与隐藏问题的研究

在android中&#xff0c;常常会和输入法的软件键盘交互。在Manifest文件中&#xff0c;系统给activity的一个属性-windowSoftInputMode来控制输入法的显示方式。该属性提供了Activity的window与软键盘的window交互的方式。这里的属性设置有双方面的影响&#xff1a;1.软键盘的显…
阅读更多...
天才基本法_《天才基本法》强推！年度神仙小说，看完这本书我竟然爱上了数学...

天才基本法_《天才基本法》强推！年度神仙小说，看完这本书我竟然爱上了数学...

《天才基本法》——长洱小说文案元宝的书评这个真的是本年度的神仙小说&#xff0c;讲述了女主回到少女时代&#xff0c;可以和他一直暗恋的数学天才重来一遍。女主让男主改变了觉得她碌碌无为的看法&#xff0c;也改变了自己的人生。本书最大的主角其实是数学&#xff01;天知…
阅读更多...
dataTables插件使用

dataTables插件使用

引用文件 <!-- DataTables CSS --> <link rel"stylesheet" type"text/css" href"http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"><!-- jQuery --> <script type"text/javascript" charset"u…
阅读更多...
一行代码，发送邮件

一行代码，发送邮件

朋友让我给他媳妇儿肚子里的孩子想个名字 走的越来越快了&#xff0c;有天看到一个论点关于说地域会影响人的一辈子。其实想想的确有这个理儿&#xff0c;这使我想起来每天早上挤地铁的时候&#xff0c;其中有一个A站的人总是特别彪悍的往里挤&#xff0c;但B站的人就是永远不会…
阅读更多...
js call,apply,bind三个方法的区别

js call,apply,bind三个方法的区别

相同点&#xff1a; 都是能够改变this的指向 不同点&#xff1a; 1.call()&#xff1a;传参方式跟bind一样&#xff08;都是以逗号隔开的传参方式&#xff09;&#xff0c;但是跟apply&#xff08;以数组的形式传参&#xff09;不一样&#xff0c; 2.bind(): 此方法应用后的情形…
阅读更多...
千年鸿蒙 盼尔来兮是什么意思,鸿蒙是什么意思_鸿蒙的意思和出处_我爱历史网...

千年鸿蒙 盼尔来兮是什么意思,鸿蒙是什么意思_鸿蒙的意思和出处_我爱历史网...

鸿蒙&#xff0c;是一个汉语词语&#xff0c;亦作“鸿濛”。中国神话传说的远古时代&#xff0c;传说在盘古开天辟地之前&#xff0c;世界是一团混沌状&#xff0c;因此把那个时代称作鸿蒙时代&#xff0c;后来该词也常被用来泛指远古时代。引证解释亦作“鸿濛”。1、宇宙形成前…
阅读更多...
python中调用万年历_python 打印万年历

python中调用万年历_python 打印万年历

题目&#xff1a;打印万年历已知条件闰年条件&#xff1a;能被4整除且不能被100整除&#xff0c;或者能被400整除1900年1月1日 是周一解题思路判断闰年;判断当月有多少天;这个月的1号是从周几开始的;格式化打印日历。解题代码#判断年份是否为闰年def is_leap_year(year):if (ye…
阅读更多...
最新文章

Copyright @ 2022~2023