<!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. winform中关于panel中滚动条和键盘事件几点体会

    最近在做winform开发中,遇到几个比较寄售的问题,通过上网查找计和自己琢磨,最终都圆满解决呢! 现在我将谈谈我在项目中遇到的问题集解决方案,以供大家参考! 一.就是我在使用键盘的keydown事件 ...

  2. 【转】在eclipse上使用Git

    在eclipse上安装好git插件后,进行操作 安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configurati ...

  3. Hibernate配置文件和映射元素解释

    象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素. AD:干货来了,不要等!WOT20 ...

  4. android异步任务详解 AsynTask

    android提供了一套专门用于异步处理的类.即:AynsTask类.使用这个类可以为耗时程序开辟一个新线程进行处理,处理完时返回. 其实,AsynTask类就是对Thread类的一个封装,并且加入了 ...

  5. IOS学习-报错误 Finishing up a navigation transition in an unexpected state. Navigation Bar subview tree might get corrupted.

    环境:XCODE:5.0.2  IOS7模拟器 界面:使用storyboard 拖拽 简单应用:一个CoreData的CRUD用例. 界面如下图(一个UITableViewController 列表 ...

  6. 20160205.CCPP体系详解(0015天)

    程序片段(01):01.杨辉三角.c 内容概要:杨辉三角 #include <stdio.h> #include <stdlib.h> #define N 10 //01.杨辉 ...

  7. Python网页解析

    续上篇文章,网页抓取到手之后就是解析网页了. 在Python中解析网页的库不少,我最开始使用的是BeautifulSoup,貌似这个也是Python中最知名的HTML解析库.它主要的特点就是容错性很好 ...

  8. postgresql pg_hba.conf

    pg_hba.conf是客户端认证配置文件 METHOD指定如何处理客户端的认证.常用的有ident,md5,password,trust,reject. PostgreSQL默认只监听本地端口,用n ...

  9. hdu 3478（判断奇环）

    题意:给你一个无向图,问你有没有可能存在一个奇环连接所有的节点. 分析:好久没写博客了,这个好习惯还是要继续保持的!这道题通过转化之后就是问你有没有存在一个奇环连接所有的节点,这里用到的方法是染色法, ...

  10. 通过HttpClient来调用Web Api接口

    回到目录 HttpClient是一个被封装好的类,主要用于Http的通讯,它在.net,java,oc中都有被实现,当然,我只会.net,所以,只讲.net中的HttpClient去调用Web Api ...