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

今天有点小高兴，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（）方法：删除并返回数组的最后一个元素，关键点有两个，其一：返回最后一个元素；其二：删除元素，数组长度变小；

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

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

赞 (0)

相关推荐

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • js拖拽一些常见的思路方法整理

    js拖拽的常见思路 1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽,拖拽中和拖拽结束时的事件(). 如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend. 2.鼠标按下即发生onmousedown事件时:获取鼠标位置,获取被拖动元素的位置,记录两者之间的纵横坐标的差值().对document元素绑定onmousemove,onmouseup事件. 刚开始接触js拖拽时,我当时疑惑的是为什么是对docume

  • 用js控制组织结构图可以任意拖拽到指定位置

    首先用js控制生成了一个组织结构图 再设置这个组织结构可以任意拖动到指定位置 页面代码如下 具体代码 实例 可以去我资源空间下载 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS弹出可拖拽可关闭的div层完整实例

    本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • js过滤特殊字符输入适合输入、粘贴、拖拽多种情况

    复制代码 代码如下: function TextValidate(type) { var code; var character; var Lang = document.getElementById('Lang').value; var err_msg = ""; if (Lang != "Eng") { err_msg = "文件夹名稱不能包含下列字符之一:\n \\ / : * ? \" < > | & , "

  • 鼠标拖拽移动子窗体的JS实现

    鼠标拖拽移动子窗体的JS实现

    1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div>    <div class="modal-window">        <div class="head">            <center>点住着块区域可以改

  • JS仿iGoogle自定义首页模块拖拽特效的方法

    本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

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

    今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢,不得不说,太多时候还是有些矫情,可看到这些鼓励还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊. 闲话不多说,继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析: 1.要实现回放拖拽痕迹,则必须先有记录: 2.要记录拖拽痕迹,则必须要实现拖拽: 这个问题前几天曾经做到过,当时实现的也略有瑕疵,但大致的实现方法已经了然于胸,所以今天在实现这个问题的时候速度快了不少,着实高兴了一番,今天再实现了一遍之后理

  • 纯JS实现可拖拽表单的简单实例

    因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • js实现鼠标拖拽多选功能示例

    js实现鼠标拖拽多选功能示例

    最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • JS实现基于拖拽改变物体大小的方法

    本文实例讲述了JS实现基于拖拽改变物体大小的方法.分享给大家供大家参考,具体如下: 拖拽改变物体大小功能:拖拽黄色小div来改变绿色大div的宽和高 主要实现由三大步: 1. 通过id获取到大小两个div 2. 给小div添加onmousedown事件 3. 在onmousedown事件给document添加onmousemove和onmouseup事件 由分析图可知,我们只需要在拖拽的时候,获取到物体不断增加的宽度值,问题就解决了 <div id="panel"> <

  • js实现鼠标拖拽缩放div实例代码

    封装为了jq插件,如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts = $.extend(def,options);// 扩展参数,使用默认值或传参 //设置最大/最小宽度 var max_width = opts.maxW, min_width = opts.minW; //

  • JS实现图片拖拽交换效果

    JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的:感谢老师的讲解. 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop): 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置:进行碰撞检测,同时计算被碰

  • JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

    本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1

  • JS实现盒子拖拽效果

    JS实现盒子拖拽效果

    本文实例为大家分享了JS实现盒子拖拽效果的具体代码,供大家参考,具体内容如下 效果: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

随机推荐