<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    height:100px;

    width:100px;

    background:pink;

    position:absolute;

    }

</style>

<script>

window.onload = function ()

{

    var obtn = document.getElementById('btn');

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

    var arrL = [];

    var arrT = [];

    odiv.onmousedown = function (ev)

    {

        var ev = ev || event;

        var dix = ev.clientX - this.offsetLeft;

        var diy = ev.clientY - this.offsetTop;

        if(odiv.setCaputre)

        {

            odiv.setCapture();

        }

        document.onmousemove = function (ev)

        {

            var ev = ev || event;

            var L = ev.clientX - dix;

            var T = ev.clientY - diy;

            if(T < 0)

            {

                T = 0;

            }else if( T > document.documentElement.clientHeight - odiv.offsetHeight)

            {

                T = document.documentElement.clientHeight - odiv.offsetHeight;

            }

            if( L < 0)

            {

                L = 0;

            }

            else if(L > document.documentElement.clientWidth - odiv.offsetWidth)

            {

                L = document.documentElement.clientWidth - odiv.offsetWidth;

            }

            arrT.push(T);

            arrL.push(L);

            odiv.style.left = L + 'px';

            odiv.style.top = T + 'px';

        };

        document.onmouseup = function ()

        {

            document.onmousemove = document.onmousedown = null;

            if( odiv.releaseCapture)

            {

                odiv.releaseCapture();

            }

        };

        return false;

    };

    obtn.onclick = function ()

    {

        var i = 0;

        arrT.reverse();

        arrL.reverse();

        obtn.timer = setInterval( function ()

        {

            odiv.style.top = arrT[i]+ 'px';

            odiv.style.left = arrL[i] + 'px';

            i++;

            if(i == arrL.length)

            {

                clearInterval(obtn.timer);

                arrT = [];

                arrL = [];

            }

        },20);

    };

};

</script>

</head>

<body>

<input type="button" id="btn" value="回放">

<div id="div1"></div>

</body>

</html>

dom 拖拽回放的更多相关文章

  1. javascript实现的拖拽回放

    这个功能很简单,直接贴代码啊: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. 拼图 canvas分割 dom拖拽 pc 移动端

    参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...

  3. dom 拖拽div

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

  4. 拖拽对DOM的影响

    前一段时间公司要对上传列表中多文本输入框添加富文本编辑功能,所以最初的想法是引入富文本编辑器插件,对每个多文本输入框实例化一次.但是上传列表还有一个可以拖拽排序的功能,在初次实例化以后,再拖拽元素就会 ...

  5. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  6. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. js实现回放拖拽轨迹-------Day48

    今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢.不得不说.太多时候还是有些矫情.可看到这些鼓舞还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊. 闲话不多 ...

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

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

  9. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

随机推荐

  1. hihoCoder 1040 矩形判断（计算几何）

    http://hihocoder.com/problemset/problem/1040 首先判断四条线段是否相交,给出八个点,如果有一些点重合,并且不同坐标的点只有4个的话,表示可以构成四边形. 然 ...

  2. leetcode：Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  3. 聚合函数字段注意.where和having的区别

    当使用聚合函数时,出现在select中的字段要么出现在聚合函数里,要么出现在group by 子句里.像下面这句是错误的: 1 SELECT  detno,AVG(sal),job FROM  emp ...

  4. JVM内存结构——运行时数据区

    在Java虚拟机规范中将Java运行时数据划分为6种,分别为: PC寄存器(程序计数器) Java栈 堆 方法区 运行时常量池 本地方法栈 一.PC寄存器(程序计数器) PC寄存器(Program C ...

  5. C#利用最新版的WPS实现导入导出

    微软的EXCEl操作相信大家也知道,不方便,安装包太大,而且表格的数据量也只有6000多(是6000多还是60000多我就忘记了),在导出导入大量数据的就没办法,而wsp表格则实现了百万数据的容量,而 ...

  6. oracle 导入数据时提示只有 DBA 才能导入由其他 DBA 导出的文件

    提示: IMP-00013: 只有 DBA 才能导入由其他 DBA 导出的文件 IMP-00000: 未成功终止导入 解决方法: 用户system用户登录然后授权 grant dba to hszx

  7. 嵌入式 uboot引导kernel，kernel引导fs

    1.uboot引导kernel: u-boot中有个bootm命令,它可以引导内存中的应用程序映像(Kernel),bootm命令对应 common/cmd_bootm.c中的do_bootm()函数 ...

  8. Intent(意图)

    Intent的中文意思是“意图,目的”的意思,可以理解为不同组件之间通信的“媒介”或者“信使”. 目标组件一般要通过Intent来声明自己的条件,一般通过组件中的<intent-filter&g ...

  9. C#的Timer

    PowerCoder 原文 C#的Timer 再C#里现在有3个Timer类: System.Windows.Forms.Timer System.Threading.Timer System.Tim ...

  10. hibernate建表多对多建表

    Student.java package cn.itcast.hiberate.sh.domain; import java.util.Set; public class Student { priv ...