视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js实现回放拖拽轨迹从过程上进行分析_javascript技巧
2020-11-27 21:25:01 责编:小采
文档


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

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

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

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

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

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

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

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

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

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

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

html语言:

//这个还是那么熟悉啊 
reback//这个是来回放的

javascript部分:



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

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

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

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

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

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

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

下载本文
显示全文
专题