<!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. C语言输出当前日期和时间

    #include <stdio.h> #include <time.h> char* asctime2(const struct tm *timeptr) { static c ...

  2. apache for mac OX S 10.10

    mac下如何针对 apache 设置虚拟目录呢?可能很多人都设置过,但也都不太会,每次都是网上找文章啥的.这里,我自己整理了一点,希望可以帮到大家. 还原 httpd.conf 配置文件 如果,你现在 ...

  3. CString和string

    CString和string(一) 概述 string和CString均是字符串模板类,string为标准模板类(STL)定义的字符串类,已经纳入C++标准之中: CString(typedef CS ...

  4. Enable test automation in Testlink

    Enabling Test Automation in Testlink   Step 1: Change config settings in testlink config file Edit c ...

  5. CSS之可收缩的底部边框

    简述 <div>用来定义文档中的分区或节,<span>用来组合文档中的行内元素.我们可以通过<div>和 <span>将HTML元素组合起来. 下面我们 ...

  6. 如何在Android studio中同时打开多个工程？ (转载)

    最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...

  7. 51nod1537 分解

    http://blog.csdn.net/qingshui23/article/details/52350523 详细题解%%%%对矩阵乘法的不熟悉.以及不会推公式 #include<cstdi ...

  8. 在asp.net前台页面中引入命名空间 和连接数据库

    例如:<%@ Import Namespace="System.Data" %> 连接数据库 <% string strconn = "Data Sou ...

  9. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...

  10. NHibernate实例化类部分属性

    NHibernate 为习惯SQL的开发者提供了接口,将查询的结果转变为持久化对象.虽然该方法不是很提倡. GetCurrentSession().CreateSQLQuery(sql) 参数sql就 ...