<!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. 转：MySQL 的show processlist

    processlist 命令的输出结果显示了有哪些线程在运行,可以帮助识别出有问题的查询语句,两种方式使用这个命令. 1.        进入 mysql/bin 目录下输入 mysqladmin p ...

  2. L1-3 宇宙无敌加法器 - 令人激动的一道题目

    L1-3 宇宙无敌加法器 - 令人激动的一道题目 感觉好久没有这么认真的做一道题了,今天看到一句话, 说是编程是一个工程型的工作,想要学好,"无他,唯手熟尔" 之前觉得自己笨,怀疑 ...

  3. outline详解

    outline这个属性平时用的不太多,最近被问及专门研究一下这个属性的作用. CSS2加进来的outline属性,中文翻译过来是外轮廓. 神马是轮廓? 轮廓,指边缘:物体的外周或图形的外框. 那这样的 ...

  4. [异常记录（三）] 从 bcp 客户端收到一个对 colid 12 无效的列长度

    这个问题是使用SqlBulkCopy拷贝数据,字符串长度超出数据类型长度导致的. 处理过程中对长度进行判断并截取就OK了. *注:SqlBulkCopy 这货 要求ColumnMappings 列的大 ...

  5. Lucene 更新、删除、分页操作以及IndexWriter优化

    更新操作如下: 注意:通过lukeall-1.0.0.jar 查看软件,我们可以看到,更新其实是先删除在插入, 前面我们知道索引库中有两部分的内容组成,一个是索引文件,另一个是目录文件, 目前我们更新 ...

  6. jqueryUI之datepicker日历插件的介绍和使用

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件.我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.

  7. pwm计时器

    1 PWM timer定时器与(watchdog差不多)2 5个16位的定时器,独立的,其中,NO PIN 没有输出.16表示ffff,和ADC中10表示3FF一样.而寄存器都是32位.(以后6410 ...

  8. ubuntu16.04 安装以及要做的事情

    1.安装ubuntu 选择安装时更新,以及MP3.图形等:然后选择分区(ext4)(安装时需先进入虚拟系统连上网,输入清华net账号),分区情况按照下图来,swap为临时用的内存分区,可以不要: 选择 ...

  9. Java对象的初始化顺序

    new一个对象时,该对象的初始化顺序如下 : 父类中的静态成员变量 父类中的静态代码块 子类中的静态成员变量 子类中的静态代码块 父类中的非静态变量 父类中的非静态代码块 父类构造函数 子类中的非静态 ...

  10. fwrite的文件缓冲同步到磁盘

    这是个小细节. 用fwrite写文件的时候,我发现刷新文件夹,对应文件大小一直是0. 网上有一篇博客写得比较完善http://blog.csdn.net/sctq8888/article/detail ...