js实现回放拖拽轨迹从过程上进行分析


Posted in Javascript onJune 26, 2014

今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢,不得不说,太多时候还是有些矫情,可看到这些鼓励还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊。

闲话不多说,继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析:

1、要实现回放拖拽痕迹,则必须先有记录;

2、要记录拖拽痕迹,则必须要实现拖拽;

这个问题前几天曾经做到过,当时实现的也略有瑕疵,但大致的实现方法已经了然于胸,所以今天在实现这个问题的时候速度快了不少,着实高兴了一番,今天再实现了一遍之后理解上又深了一点,那就今天再来记录下;

至于记录拖拽痕迹,这个分析就来长话短说,毕竟做过一次了:

1、确定现在div的位置和状态,保证absolute才能实现拖动;

2、监听鼠标拖动事件(昨天总结的几种鼠标事件);

3、根据相应的鼠标事件,做出相应的响应,在onmousemove拖拽中记录div存在过的点;

4、监听鼠标弹起事件,来结束拖拽事件和点的记录

任然是先来实现下代码(这里将所有代码同时列出,后面逐一分析):

html语言:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//这个还是那么熟悉啊 
<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//这个是来回放的

javascript部分:

window.onload=function(){ 
var obj=document.getElementById("showZone"); 
var disX=disY=0; 
var dragIf=false; 
var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//这个是实现记录和回放的关键,其它都是基本元素的获取 
var oa=document.getElementsByTagName("a")[0]; 

obj.onmousedown=function(event){ 
var event=event||window.event; 
disX=event.clientX-obj.offsetLeft;//鼠标相对于div边框的距离 
disY=event.clientY-obj.offsetTop; 
dragIf=true;//可以进行拖拽的标志 

position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就开始了 
return false; 
}; 
document.onmousemove=function(event){ 

if(!dragIf)return;//这个判断极为重要,只有按下的移动才有效 
var event=event||window.event; 
var nowX=event.clientX-disX;//根据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧 
var nowY=event.clientY-disY; 
var maxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth,是div的宽度,不是offsetLeft 
var maxY=document.documentElement.clientHeight-obj.offsetHeight; 
nowX=nowX<0?0:nowX;//这些判定,只是判断不要出了边界 
nowY=nowY<0?0:nowY; 
nowX=nowX>maxX?maxX:nowX; 
nowY=nowY>maxY?maxY:nowY; 

obj.style.marginTop=obj.style.marginLeft=0; 
obj.style.left=nowX+"px";//不要忘记+“px”,只有style.left/top是有“px”的 
obj.style.top=nowY+"px"; 
position.push({x:nowX,y:nowY});//不停记录啊 
obj.innerHTML="X:"+nowX+"Y:"+nowY;//直观的看到变化 
return false; 
}; 
document.onmouseup=function(){ 
dragIf=false;//不允许再进行拖拽和记录了 
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; 
}; 
oa.onclick = function (){ 
if (position.length == 1) return;//只有一个的时候,说明并未移动 
var timer = setInterval(function (){ 
var oPos = position.pop(); 
oPos ? (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被这个写法惊艳到 
}, 30); 
return false; 
}; 
};

需要注意的关键点,简要说几个:

1、var position数组,点的集合:这个点,是以div的左上角的移动点,也就是说我们记录的移动轨迹实际上就是div左上角的点的集合,offsetLeft为x坐标,offsetTop为y坐标,这个坐标轴你知道怎么画不;

2、程序中出现的几个长度或距离:offsetLeft、clientX、offsetWidth、style.left和document.documentElement.clientWidth等等;

3、push()方法:向数组末尾添加元素,改变数组长度,末尾哦;

4、pop()方法:删除并返回数组的最后一个元素,关键点有两个,其一:返回最后一个元素;其二:删除元素,数组长度变小;

这样我们实现了倒着回放,实现原理就不用多说了吧,如果要是正着回放,我们是不是就要获取并删除数组的第一个值了,哈,试着动手写写看吧。

不得不说还是用鼠标拖起来舒服,键盘移动太不方便了,用鼠标可以肆无忌惮的拖拽啊.....天已入伏,要热,今天倒还好....

Javascript 相关文章推荐
jquery图片放大镜功能的实例代码
Mar 26 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
JS的事件绑定深入认识
Jun 26 #Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 #Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 #Javascript
document.forms用法示例介绍
Jun 26 #Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 #Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 #Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 #Javascript
You might like
收音机的保养
2021/03/01 无线电
php 删除记录实现代码
2009/03/12 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
js实现每日签到功能
2018/11/29 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
教师现实表现材料
2014/02/14 职场文书
贺卡寄语大全
2014/04/11 职场文书
装修协议书范本
2014/04/21 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
师范生见习报告范文
2014/11/03 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python