<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            body{

                height:1200px;

                background-color: azure;

            }

            #drag{

                background-color: cornflowerblue;

                border: 1px solid black;

                position: absolute;

                width: 200px;

                height: 100px;

            }

        </style>

    </head>

    <body>

        <div id="drag">

        </div>

        <script>

            //加入文字之后拖拽容易出现选中字后跳动bug

            var drag = document.getElementById("drag"),

                text = document.createTextNode("0"),

                flag ,

                time =0;

            drag.appendChild(text);

            drag.addEventListener("mousedown",dragDiv,false);

            function dragDiv(e){

                flag = true;

                if(flag){

                    var handler = setInterval(function(){

                        time+=0.02;

                        drag.innerHTML =time.toFixed(2);      

                        if(!flag){

                            clearInterval(handler);

                        }

                    },20)

                }

                var x=e.layerX||e.offsetX;

                var y=e.layerY||e.offsetY;

                document.addEventListener("mousemove",docMove,false);

                document.addEventListener("mouseup",function(){

                    flag = false;

                },false);

                function docMove(e){

                    if(flag){

                        e.preventDefault;

                         var l =parseInt(drag.style.left);

                         var t =parseInt(drag.style.top);

                         drag.style.left = -x+e.pageX+"px";

                         drag.style.top = -y+e.pageY +"px";

                    }

                }

            }

        </script>

    </body>

</html>

原生js实现div拖拽+按下鼠标计时的更多相关文章

  1. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  3. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  4. 好玩的原生js的简单拖拽

    这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...

  5. 原生JS实现图片拖拽移动与缩放

    看一下最终效果,图片可以拖动,可以缩放 把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的lef ...

  6. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  7. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  8. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  9. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

  1. 【python】argparse学习(转)

    点击这里成为作者 · 更新于 2018-11-14 21:00:36 argparse argparse 是 Python 内置的一个用于命令项选项与参数解析的模块,通过在程序中定义好我们需要的参数, ...

  2. 解题报告：hdu1013 Digital Roots

    2017-09-07 22:02:01 writer:pprp 简单的水题,但是需要对最初的部分进行处理,防止溢出 /* @theme: hdu 1013 Digital roots @writer: ...

  3. web.xml上下文初始化参数

    1.在web.xml文件中配置上下文参数 <!--<context-param>标签声明上下文初始化参数, --> <!-- 上下文初始化的参数可以被应用程序用所有ser ...

  4. ZooKeeper的API操作(二)(通俗易懂)

    所需要6个jar包,都是解压zookeeper的tar包后里面的. zookeeper-3.4.10.jar    jline-0.094.jar    log4j-1.2.16.jar netty- ...

  5. apollo stomp client 代码示例

    0.环境准备 0.1.linux 0.2.java 0.3.下载apollo二进制包,解压 0.4.创建broker,名字为 userlog {APOLLO_HOME}/bin/apollo crea ...

  6. 格雷码C++实现

    格雷码C++实现 题目 给定一个整数n,请返回n位的格雷码,顺序从0开始,要求递归实现. 格雷码: 在一组数的编码中,若任意两个相邻的代码只有一位二进制数不同,则称这种编码为格雷码(Gray Code ...

  7. bzoj1007: [HNOI2008]水平可见直线 单调栈维护凸壳

    在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的.例如,对于直线:L1:y=x; L2:y=-x; L3 ...

  8. 2-3 sshd服务---暴力破解应对策略

      sshd服务暴力破解步骤 sshd暴力破解方法 防止暴力破解调优 1. 变更默认端口 2. 变更root用户 3. 日志监控-->防止暴力破解(fail2ban应用) fail2ban详解 ...

  9. 已经安装了node和npm，输入node -v 未找到命令

    昨天虚拟机上安装了nvm.node.npm,今天打开输入node -v,就显示未找到命令 输入nvm --version 发现还是有nvm版本的,不然都要以为刚配好的虚拟机又要重新安装... 再输入 ...

  10. HDU 2492 BIT/逆序数/排列组合

    Ping pong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...