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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
js日期时间补零的小例子
Mar 05 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
js 实现验证码输入框示例详解
Sep 23 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
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python3基础之list列表实例解析
2014/08/13 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
sklearn+python:线性回归案例
2020/02/24 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
十佳教师事迹材料
2014/01/11 职场文书
淘宝店策划方案
2014/06/07 职场文书
村班子对照检查材料
2014/08/18 职场文书
家长高考寄语
2015/02/27 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
使用scrapy实现增量式爬取方式
2022/06/21 Python