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

<!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. 金蝶盘点机PDA条码数据采集器WMS系统具体有哪些功能

    1.  使用汉码盘点机PDA实现仓库条码管理的好处 (1)  传统电脑管理软件出入库需要来回电脑跑人工手工电脑录单效率低,通过人眼识别商品品种和清点商品数量,容易造成录单错误.从而造成电脑管理软件库存 ...

  2. Linux 终端快捷键整理

    一.历史命令相关快捷键 快捷键 说明 ↑.↓ 显示历史命令 !! 执行上一个命令 !n 执行历史命令中第 n 条命令 !-n 执行历史命令中倒数第 n 条命令 二.移动相关快捷键 快捷键 说明 Ctr ...

  3. PAT甲题题解-1060. Are They Equal (25)-字符串处理(科学计数法)

    又是一道字符串处理的题目... 题意:给出两个浮点数,询问它们保留n位小数的科学计数法(0.xxx*10^x)是否相等.根据是和否输出相应答案. 思路:先分别将两个浮点数转换成相应的科学计数法的格式1 ...

  4. Linux实验报告

    第一次链接: http://www.cnblogs.com/L1nke/p/4966820.html 第二次链接: http://www.cnblogs.com/L1nke/p/4992758.htm ...

  5. 《Linux内核分析与实现》 第四周 读书笔记

    第五章 系统调用 20135307 张嘉琪 5.1 与内核通信 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 它为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳 ...

  6. 每日scrum(7)

    今天是小组用来写文稿的日子,包括软件需求分析报告,概要设计报告,详细设计报告,数据库设计报告,软件测试报告,各组员领取自己的任务然后完成~ 任务看板: 燃尽图:

  7. UML实践详细经典教程

    面向对象的问题的处理的关键是建模问题.建模可以把在复杂世界的许多重要的细节给抽象出.许多建模工具封装了UML(也就是Unified Modeling Language™),这篇课程的目的是展示出UML ...

  8. python设计模式-单例模式

    单例模式应用场景 代码的设计模式共有25种,设计模式其实是代码无关的.其目的是基于OOP的思想,不同应用场景应用不同的设计模式,从而达到简化代码.利于扩展.提示性能等目的.本文简述Python实现的单 ...

  9. Jenkins之手动安装

    Download and run Jenkins Download Jenkins. Open up a terminal in the download directory. Run java -j ...

  10. 无旋treap板子！

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...