十分简单的效果。

<!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. LightOJ 1341 Aladdin and the Flying Carpet（唯一分解定理）

    http://lightoj.com/volume_showproblem.php?problem=1341 题意:给你矩形的面积(矩形的边长都是正整数),让你求最小的边大于等于b的矩形的个数. 思路 ...

  2. UVa 10765 鸽子和炸弹（割点）

    https://vjudge.net/problem/UVA-10765 题意: 给一个n个点的无向图,求每个点删去后形成的连通分量数. 思路: 判断割点,如果是割点的话,在dfs的时候计算出删去它后 ...

  3. 2018 ICPC北京 H ac自动机

    n=40的01串,求有多少m=40的01串中包含它,包含的定义是存在子串有至多一个字符不相同 600组n=15的数据 15组n=40的数据,所以我们只能支持n^5的算法. 陷入两个比较有意思的坑: 1 ...

  4. ExtJs4.2.1中的Ext.grid.GridPanel选择行回车事件

    网上大多说的是“rowdblclick” 其实是“itemdblclick” 这个东西坑了我一上午.

  5. Redis可以做哪些事儿?

    Redis可以作为数据库,提供高速缓存,消息队列等功能,这里介绍Redis可以做的其中两件事: 1.提供缓存功能,作为缓存服务器; 2.轻量级的消息队列(MQ)进行使用． /// <summar ...

  6. python中装饰器的执行细节

    本文代码借用 廖雪峰的python教程(官网:http://www.liaoxuefeng.com/) 不了解装饰器的可以先看教程 直接上带参数装饰器的代码 def log(text): def de ...

  7. 使用bootstrap时碰到问题$(...).modal is not a function

    我出现这个问题是,因为bootstrap没有正确引入. 除了bootstrap的路径需要被正确引入外,它引入时还要放在jquery.js后面,否则也会报这个错误.

  8. RocketMQ学习分享

    消息队列的流派 什么是 MQ Message Queue(MQ),消息队列中间件.很多人都说:MQ 通过将消息的发送和接收分离来实现应用程序的异步和解偶,这个给人的直觉是——MQ 是异步的,用来解耦的 ...

  9. KMP算法(改进后的字符串匹配算法)

    转载:http://blog.csdn.net/liu88010988/article/details/50789960 kmp算法完成的任务是:给定两个字符串O和f,长度分别为n和m,判断f是否在O ...

  10. iOS自动化探索（九）使用Jenkins自动化打包并发布iOS App

    继前一篇: Mac环境下安装Jenkins Jenkins安装好后, 我们试着创建一个iOS自动打包并发布的任务 iOS App构建必须在MAC上面使用xcode进行,所以我们要安装下xcode集成插 ...