这个功能很简单，直接贴代码啊：

<!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>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

#btn1 {position:absolute; right:10px; top:10px; width:50px;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽回放</title>

<script>

window.onload = function () {

    var oDiv = document.getElementById('div1');

    var oBtn = document.getElementById('btn1');

    var arr = [];

    oDiv.onmousedown = function (ev) {

        var oEvent = ev || event;

        var disX = oEvent.clientX - oDiv.offsetLeft;

        var disY = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function (ev) {

            var oEvent = ev || event;

            var l = oEvent.clientX - disX;

            var t = oEvent.clientY - disY;

            arr.push({x: l, y: t});

            oDiv.style.left = l + 'px';

            oDiv.style.top = t + 'px';

        };

        document.onmouseup = function () {

            document.onmousemove = null;

            document.onmouseup = null;

        };

    };

    oBtn.onclick = function () {

        var timer = setInterval (function () {

            if(arr.length > 0) {

                var oData = arr.pop();

                oDiv.style.left = oData.x + 'px';

                oDiv.style.top=oData.y + 'px';

            } else {

                clearInterval(timer);

            }

        }, 10);

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="回放" />

<div id="div1">

</div>

</body>

</html>

javascript实现的拖拽回放的更多相关文章

  1. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  3. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  4. JavaScript动画-模拟拖拽

    模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标 ...

  5. JavaScript：鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...

  6. JavaScript实现图片拖拽、粘贴上传

    前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...

  7. dom 拖拽回放

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 超级简单的利用javascript实现文件拖拽事件

    1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...

  9. JavaScript 面向对象的拖拽

    一.body <div id="box"></div> 二.css <style> #box { position: abaolute; top ...

随机推荐

  1. STM32下载Bin文件的几种方式

    一.STM32 ST-LINK Utility 1.下载安装软件 官网下载地址:http://www.st.com/zh/development-tools/stsw-link004.html 百度网 ...

  2. Unity之日志管理

    1. 目录结构 1. Plugins --> 存放Log4Net动态库文件 2. Scripts --> 存放写日志的脚本 3. StreamingAssets -->存放Log4N ...

  3. DRF框架QQ登录功能

    用户模块---QQ登录 流程图 QQ登录文档:http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0 流程简述 ...

  4. 简言MVC

    什么是MVC? MVC是一种代码的组织结构,在一个工程项目中,将代码的数据处理,逻辑单元和交互部分分离开来达到一种低耦合的效果,便于工程的修改.MVC中M代表Model,V代表View,C代表Cont ...

  5. LINUX基础实验报告

    实验一:主要是介绍Linux系统概况,无运行代码. 实验二:Linux的基本操作 重要知识点 [Tab] 使用Tab键来进行命令补全,Tab键一般键盘是在字母Q旁边,这个技巧给你带来的最大的好处就是当 ...

  6. Linux内核分析——第三周学习笔记20135308

    第三周 构造一个简单的Linux系统MenuOS 计算机三个法宝: 1.存储程序计算机 2.函数调用堆栈 3.中断 操作系统两把宝剑: 1.中断上下文的切换:保存现场和恢复现场 2.进程上下文的切换 ...

  7. 构建之法-软件测试+质量保障+稳定和发布阶段+IT行业的创新+人、绩效和职业道德

    第十三章(软件测试) 要知道为什么有软件测试,首先需要知道软件开发,软件开发者一般都很难检查出自己的错误,所以才需要另外一个人测试,所以软件测试就诞生了. 书本介绍了很多测试方法,各有各的优缺点,至于 ...

  8. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量

    大家在中学就已经学过变量的概念了.例如:我们令 x = 100,则可以推出 x*2 = 200 试试下面这段 Python 代码 import turtle turtle.shape("tu ...

  9. Vue-router的基本用法

    刚学习vue不久,就接触了路由这个好东西.下面简单聊聊vue-router的基本用法. 一.路由的概念 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击 ...

  10. pgm10

    这部分讨论 MAP 估计.从某个角度上来说,我们可以将这个问题转换成为前面讨论过的: 这样一来我们只需要将原先的 sum-product 换成 max-sum 即可.话虽这么说,我们还是看看 Koll ...