十分简单的效果。

<!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: 100px;

                height: 100px;

            }

        </style>

    </head>

    <body>

        <div id="drag">

        </div>

        <script>

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

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

                flag ;

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

            function dragDiv(e){

                flag = true;

                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";

                         console.log(drag);

                    }

                }

            }

        </script>

    </body>

</html>

原生js实现div拖拽的更多相关文章

  1. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  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拖拽实现resize和碰撞检测

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

  7. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  8. 实现Div拖拽

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

  9. html之div拖拽，html5拖拽

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

随机推荐

  1. 解题报告：hdu1013 Digital Roots

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

  2. Android -- 网络图片查看器，网络html查看器， 消息机制， 消息队列，线程间通讯

    1. 原理图 2. 示例代码 (网络图片查看器) (1)  HttpURLConnection (2) SmartImageView (开源框架:https://github.com/loopj/an ...

  3. 构建hadoop集群时遇到的问题

    在构建hadoop集群时,出现过主节点中的namenode或datanode启动不成功的问题.在日志文件中往往会显示namenode和datanode中clusterID不相同的问题,这个问题往往都是 ...

  4. em和px的区别一次彻底搞清楚！

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...

  5. angular directive restrict 的用法

    E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视 实例如下: 原帖:www.thinkster.io/angularjs/ ...

  6. Android和iOS中Cocos2dx的横屏竖屏设置

    一.横屏.竖屏设置 1.android AndroidManifest.xml文件中, screenOrientation="landscape" 为横屏, screenOrien ...

  7. 设计模式--状态模式C++实现

    1定义 当一个状态的内在状态改变时允许其行为改变,这个对象看起来像改变了其类 2类图 角色分析 State抽象状态角色,接口或者抽象类,负责状态定义,并且封装环境角色以实现状态切换 ConcreteS ...

  8. Lua学习笔记3. 函数可变参数和运算符、转义字符串、数组

    1. Lua函数可以接受变长数目的参数,和C语言类似,在函数的参数列表中使用(...)表示函数可以接受变长参数 lua函数将参数存放在一个table中,例如arg,那么#arg可以获得参数的个数 fu ...

  9. Python之坐标轴刻度细化、坐标轴设置、标题图例添加

    学习python中matplotlib绘图设置坐标轴刻度.文本 http://www.jb51.net/article/134638.htm Python绘图 https://www.cnblogs. ...

  10. 【Error】Creating Server TCP listening socket *:6379: bind: No such file or directory

    redis 运行服务时报错: Creating Server TCP listening socket *:6379: bind: No such file or directory 解决方法,依次输 ...