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

<!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. jmeter：正则表达式的使用

    Jmeter中正则关联的使用是可以提取动态变化数据进行传递:关联的方式和提取器有多种,这篇先讲解正则表达式怎么来关联(?) 在需要获取数据的http请求上添加后置处理器 比如提取百度title值: 正 ...

  2. 《杜增强讲Unity之Tanks坦克大战》11-游戏流程控制

    11 游戏流程控制 使用协程来控制游戏流程 11.1 添加MessageText 首先添加一个Text来显示文字   image 设置GameMgr   image 11.2 游戏整体流程 下面Gam ...

  3. [文章存档]Azure上部署的java app在向第三方服务传送中文时出现乱码

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-java ...

  4. Unity插件-NGUI学习笔记

    Anchors 的作用 类似Android里面的.9格式图片的功能, 边框可以随着文字变大而变大. 实现方法: 用NGUI 创建一个Sprite, 命名为TextBg, 一个Label, Label的 ...

  5. java 中的内部类总结

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类. 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动). 显 ...

  6. M1阶段事后分析

    M1阶段的开发结束了,在周四的课上我们组也进行了alpha阶段的汇报.我们的努力得到了应有的回报,下面我们将针对M1阶段产生的一些问题进行分析和反思. 一.设想和目标 1.我们的app更像是一款针对北 ...

  7. SQL Server 删除重复数据只保留一条

    DELETE FROM Bus_TerminalMessage_Keywords WHERE Content IN (select Content from Bus_TerminalMessage_K ...

  8. Selenium WebDriver VS Selenium RC

      WebDriver到底是什么? WebDriver是一个Web的自动化测试框架,它支持你执行你的测试用例在不同的浏览器上面,并不像Selenium一样只支持Firefox.     WebDriv ...

  9. Python进阶-配置文件

    一. 什么是配置文件?为什么要做配置文件? 将所有的代码和配置都变成模块化可配置化,这样就提高了代码的重用性,不再每次都去修改代码内部,这个就是我们逐步要做的事情,可配置化 二. 配置文件长啥样? 配 ...

  10. 【转】I²C总线上拉电阻阻值如何选择？

    I2C总线为何需要上拉电阻? I2C(Inter-Intergrated Circuit)总线是微电子通信控制领域中常用的一种总线标准,具有接线少,控制方式简单,通信速率高等优点. I2C总线的内部结 ...