十分简单的效果。

<!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. Rancher在Catalog中 使用Helm Chart安装应用

    1. 首先在github上创建一个项目: 这里以我的项目为例:https://github.com/hankuikuide/cis-rancher-cattle 可以看出里出其实除了chart文件什么 ...

  2. HAproxy的安装配置及动静分离

    /////////////////////////////目录//////////////////////////////////////////一.安装HAproxy二.编写HAproxy启动脚本三 ...

  3. ADO.net笔记

    1.DbConnectionConnection对象也称为数据库连接对象,Connection对象的功能是负责对数据源的连接.所有Connection对象的基类都是DbConnection类.Conn ...

  4. ZooKeeper原理 --------这可能是把ZooKeeper概念讲的最清楚的一篇文章

    相信大家对 ZooKeeper 应该不算陌生,但是你真的了解 ZooKeeper 是什么吗?如果别人/面试官让你讲讲 ZooKeeper 是什么,你能回答到哪个地步呢? 我本人曾经使用过 ZooKee ...

  5. IOS-如何锁定Xcode的API头文件

    如何锁定Xcode的API头文件1, 打开终端2, 前往Xcode.app, 命令: cd /Applications/Xcode.app3, 把头文件修改为只读, 命令: sudo chown -h ...

  6. 010——数组（十）compact extract in_array

    <?php /** 10 数组 compact extract in_array */ //compact() (紧凑的,简洁的) 将变量转换为数组,变量名为数组键名,变量值为数组的键值. /* ...

  7. 【hdu1005】Number Sequence

    题目描述 一个数列的定义如下: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7. 给出A和B,你要求出f(n). 输入 输 ...

  8. 四、dbms_alert(用于生成并传递数据库预警信息)

    1.概述 作用:用于生成并传递数据库预警信息.使用包DBMS_ALERT,则必须以SYS登陆,为该用户授予执行权限.sql>conn sys/oracle as sysdbasql>gra ...

  9. This function has none of DETERMINISTIC, NO SQL解决办法

    This function has none of DETERMINISTIC, NO SQL解决办法 创建存储过程时 出错信息: ERROR 1418 (HY000): This function ...

  10. 公客网beta阶段项目展示

    课程评价网站--公客网 为大学生选课排忧解难 公正客观的评课网站 为大学生提供发表自己看法的平台 为每一门课程打出公正的评分 beta阶段的新功能 beta阶段发布说明 评价的增删改 对课程发表评价 ...