<!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. POJ 3494 Largest Submatrix of All 1’s（最大全1子矩阵）

    题目链接:http://poj.org/problem?id=3494 题意:给出一个01的矩阵,找出一个面积最大的全1矩阵. 思路:用h[i][j]表示从位置(i,j)向上连续1的最大长度.之后枚举 ...

  2. 《OD大数据实战》mac下安装nginx+php

    一.mac安装nginx + php + php-fpm  或apache + php 1. Mac 下 Nginx.MySQL.PHP-FPM 的安装配置 2. Mac下安装LNMP(Nginx+P ...

  3. apache 配置用户级目录

    如果你只需要在用户目录下使用apache的话,还有一个最简单的方式,直接将 httpd.conf文件下的 DocumentRoot "/Library/WebServer/Documents ...

  4. ionic中极光推送的集成

    1.到极光官网注册账号,新建应用获得appkey. 详见:https://www.jiguang.cn/app/list 2.引入jpush插件 详见:https://github.com/jpush ...

  5. Codeforces 505 A Mr. Kitayuta's Gift【暴力】

    题意:给出一个字符串,可以向该字符串的任意位置插入一个字母使其变成回文串 因为字符串的长度小于10,枚举插入的字母,和要插入的位置,再判断是否已经满足回文串 #include<iostream& ...

  6. HDU 5273 Dylans loves sequence (逆序对，暴力)

    题意: 给定一个序列,对于q个询问:(L,R)之间有几个逆序对?序列元素个数上限1000,q上限10万.仅1测试例子. 思路: [L,R]的逆序对数量可以这么算,假设L<=K<R,将区间拆 ...

  7. django - raw sql - 注意点！

    现在的自己已经不怕mysql,已经熟悉了sql “搜索优化专家有时候都无法顾全所有,更何况ORM” 两种方法执行 sql原生语句 tablename.objects.raw() - 这样的语句,只能执 ...

  8. web.xml整合s2sh内容

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  9. Cython：基础教程(1) 语法

    1 变量定义 http://docs.cython.org/src/reference/language_basics.html http://blog.csdn.net/i2cbus/article ...

  10. org.hibernate.MappingException: duplicate import异常

    在开发hibernate时,一起多谢ORM类和映射文件时,报出:org.hibernate.MappingException: duplicate import com.XXX异常 解决方案: 检查你 ...