十分简单的效果。

<!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. Css常用属性单位

    长度单位:px-像素 颜色单位:         ①十六进制:#FFFFFF:         ②颜色名称:red:         ③RGB颜色代码:RGB(0-255,0-255,0-255): ...

  2. Animal_human_kp人脸与马脸迁移学习GitHub 论文实现

    Interspecies Knowledge Transfer for Facial Keypoint Detection关键点检测   Github地址:Interspecies Knowledge ...

  3. MU puzzle

    2017-08-06 20:49:38 writer:pprp 三种操作: 1.MUI -> MUIUI 2.MUUU -> MU 3.MUIII -> MUU 分析:有两个操作:将 ...

  4. 深入浅出-Binding的源与路径

    1.把控件作为Binding源与Binding标记扩展<TextBox x:Name="textBox1" Text="{Binding Path=Value, E ...

  5. React 16.3.0 发布，构建用户界面的 JavaScript 库

    React 16.3.0 已发布,React 是 Facebook 推出的一个为数据提供渲染为 HTML 视图,用来构建用户界面的开源 JavaScript 库. React 视图通常采用包含以自定义 ...

  6. FlexboxLayout——Android弹性布局

    FlexboxLayout是一个Android平台上与CSS的 Flexible box 弹性盒子布局模块 有相似功能的库.Flexbox 是CSS 的一种布局方案,可以简单.快捷的实现复杂布局. F ...

  7. 建造者模式（Builder和Director）

    一.建造者模式介绍 建造者模式:将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. [构建与表示分离,同构建不同表示] 假如一个对象的构建很复杂,需要很多步骤.则可以使用建造者模式 ...

  8. linux安装mysql5.7.24

    一.卸载 mysql安装有三种方式,包括二进制包安装(Using Generic Binaries).RPM包安装.源码安装.一般是前两种比较多 卸载方法参考Linux->卸载Mysql方法总结 ...

  9. 如何解决svn Authorization failed错误

    出现这种问题肯定是SVN服务器出现了问题,需要修改其三个配置文件: 1.svnserve.conf: [general] anon-access = read auth-access = write  ...

  10. 2018-2019-2 《网络对抗技术》Exp2 后门原理与应用 20165210

    2018-2019-2 <网络对抗技术>Exp2 后门原理与应用 20165210 实验内容: 使用netcat获取主机操作Shell,cron启动. 使用Socat获取主机操作Shell ...