今天有点小高兴,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()方法:删除并返回数组的最后一个元素,关键点有两个,其一:返回最后一个元素;其二:删除元素,数组长度变小;
这样我们实现了倒着回放,实现原理就不用多说了吧,如果要是正着回放,我们是不是就要获取并删除数组的第一个值了,哈,试着动手写写看吧。
不得不说还是用鼠标拖起来舒服,键盘移动太不方便了,用鼠标可以肆无忌惮的拖拽啊.....天已入伏,要热,今天倒还好....
本文向大家介绍canvas轨迹回放功能实现,包括了canvas轨迹回放功能实现的使用技巧和注意事项,需要的朋友参考一下 本文通过json机构,HTML代码以及JS代码详细给大家分析了canvas轨迹回放功能实现的过程,以下是全部内容。 json结构 html 将json作为js文件引入,并将其赋值给全局变量testPath(引入方式按照实际项目要求来) js 以上就是本次文章的全部内容,如果大家在
操作步骤: ①在"定位监控"模块,开启"实时监控"开关。 ②点击"轨迹回放"。 ③选择日期,点击协作人员,可查看协作成员的历史轨迹。 操作动图: [查看原图]
本文向大家介绍Openlayers3实现车辆轨迹回放功能,包括了Openlayers3实现车辆轨迹回放功能的使用技巧和注意事项,需要的朋友参考一下 记录基于geoserver地图服务,Openlayers3在web前端实现车辆轨迹回放功能,并记录和解决过程中出现的linestring只描绘部分经纬度坐标问题。 参考Openlayers3 官网例子 html map初始化 ajax获取坐标数据 显示
本文向大家介绍微信小程序实现轨迹回放的示例代码,包括了微信小程序实现轨迹回放的示例代码的使用技巧和注意事项,需要的朋友参考一下 在微信小程序实现轨迹回放的效果 1、wxml 2、js 后台数据使用的是百度鹰眼的数据。最终效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js实现拖拽功能,包括了js实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 效果图:(红色方块可任意拖动) 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍JS鼠标拖拽实例分析,包括了JS鼠标拖拽实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考,具体如下: JS代码: 完整代码: 希望本文所述对大家JavaScript程序设计有所帮助。