<!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. Android gingerbread eMMC booting

    Android gingerbread eMMC booting This page is currently under construction. The content of this page ...

  2. [HIHO1322]树结构判定（并查集）

    题目链接:http://hihocoder.com/problemset/problem/1322 给一个图,判断这个图是不是一棵树. 判定的方法:首先是连通图,其次所有点的入度都小于等于1. /* ...

  3. JavaScript高级编程（一）

    书中第2章,在HTML中使用JavaScript摘要总结 2.1 <script>元素 <script>中的5个属性:charset:可选.表示通过src属性指定的代码的字符集 ...

  4. linux 多处理器概念

    Linux 提出了 Multi-Processing 的概念,它的调度器可以将操作系统的线程均分到各个核(或硬件线程)上去执行,以此达到并行计算的目的,从而也可以极大地提高系统的性能. 实现计数器 1 ...

  5. 作业调度框架 Quartz.NET 2.0 StepByStep

    注:目前网上诸多介绍Quartz.net的文章,甚至Quartz.net官网上的Tutorial都是1.0版本的,而这个项目在2.0版本对项目进行了比较大规模的修改,使得原有的很多例子都不能运行,故写 ...

  6. HDU 1496 Equations 等式（二分+暴力，技巧）

    题意:给出4个数字a,b,c,d,求出满足算式a*x1^2+b*x2^2+c*x3^2+d*x4^2=0的 (x1,x2,x3,x4) 的组合数.x的范围[-100,100],四个数字的范围 [-50 ...

  7. cURL: PHP并发处理方式

    function classic_curl($urls, $delay) { $queue = curl_multi_init(); $map = array(); foreach ($urls as ...

  8. 【转】Qt数据库总结

    转自:http://blog.chinaunix.net/uid-25201977-id-3014100.html #include <QtSql>QT += sql QSqlDataba ...

  9. foreach的指针问题

    从代码: $arr = array(,,,,); echo '$arr = array(1,2,3,4,5)','<br>'; foreach($arr as $key => &am ...

  10. AIX 第5章 指令记录

    AIX引导过程 AIX不同引导模式 AIX的关闭 AIX的计划任务 AIX服务的管理 AIX的常用日志 POST=Power On Self Test   rc.boot 的三次调用 /etc/ini ...