<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 5000px;
        }
        div {
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 鼠标拖拽div,移动事件
        // 通过鼠标的移动事件,获取标签位置的坐标
        // 将坐标赋值给div标签,作为定位的数值数据
        // 一般拖拽效果是 鼠标按下跟随移动,鼠标抬起,拖拽效果消失
        var oDiv = document.querySelector('div');
        // 给div添加鼠标按下事件
        oDiv.addEventListener('mousedown', function () {
            // 鼠标的移动,不仅仅是再标签内移动,在整个页面中移动,都要执行事件获取坐标
            // JavaScript自动给函数形参赋值事件对象,不需要单独再去赋值
            document.addEventListener('mousemove', myMove );
        })
        oDiv.addEventListener('mouseup', function () {
            // 当鼠标抬起时,让鼠标移动不再有执行函数
            // 使用 removeEventListener() 删除事件绑定的 函数
            // 绑定时必须是函数名称,才能执行函数的是删除
            document.removeEventListener('mousemove' , myMove );
        })
        // 事件对象是 JavaScript程序 自动存储的数据
        // 在调用时,是不需要传参的
        function myMove(e) {
            e = e || window.event;
            // 获取鼠标坐标位置
            
            // 使用 offsetY  offsetX  会造成 div 闪来闪去
            // 必须要记住: 鼠标拖拽,不能使用 offsetY  offsetX 
            // 在鼠标拖拽时,要是用 clientY 和 clientY 获取坐标
            // 当前是 div没有范围,只是在整个页面中拖拽,使用的 clientY clientX
            // 当前使用的是 fixed 定位
            // 定位的坐标原点是 视窗窗口的左上角
            // 获取定位坐标的原点也要是 视窗窗口的左上角
            var top = e.clientY;
            var left = e.clientX;
            // console.log(top , left);
            // 获取div标签的相关数据
            var h = oDiv.offsetHeight;
            var w = oDiv.offsetWidth;
            // 如果需要div中心位置和鼠标位置重合
            // 需要减去占位的一半
            oDiv.style.top = top - h/2 + 'px';
            oDiv.style.left = left - w/2 + 'px';
        }
        // 总结:
        //    1,给鼠标添加 mousedown  和 mouseup 事件
        //    2, mousedown 中 给 document 绑定 mousemove 事件
        //       之后还要删除  mousemove 事件的 事件处理函数 必须绑定 函数名称
        //    3, mouseup 中 删除 mousemove 事件绑定的 函数名称
        //    4, mousemove 事件中 事件函数,要获取事件对象e
        //       JavaScript会自动给事件对象e,存储赋值实参,我们不需要赋值实参
        //    5, 当前demo中,div标签使用的是fixed定位
        //       fixed定位原点,是视窗窗口的左上角
        //       获取 鼠标坐标 , 也要使用 clientX clientY 获取相对视窗窗口的坐标
    </script>

div拖拽移动事件的更多相关文章

  1. 实现Div拖拽

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

  2. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  3. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  4. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  5. html之div拖拽，html5拖拽

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

  6. 运用DIV拖拽实现resize和碰撞检测

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

  7. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  8. div拖拽

    分析逻辑关于该过程有一下3个动作 1.点击 2.移动 3.释放鼠标 1.点击时获得点击下去的一点的坐标(盒子的top,left),去除默认事件. 2.移动时不断改变盒子的坐标.(移动的dom目标应该为 ...

  9. div拖拽的问题

    今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX, ...

  10. js 拖拽 鼠标事件，放大镜效果

    设置网站播放视频 只有一个是播放的 //需要引入jquery var v = $("video") v.bind("play",function(){ for( ...

随机推荐

  1. 【笔记】Oracle列转行unpivot&行转列 PIVOT

    unpivot 说明:将表中多个列缩减为一个聚合列(多列转多行) 语法:unpivot(新列名 for 聚合列名 in (对应的列名1-列名n )) 写到了一个力扣的题,发现这个unpivot函数还没 ...

  2. Beetl 源码解析：GroupTemplate 类

    本文首发于公众号:腐烂的橘子 前言 Beetl 是一款 Java 模板引擎,在公司的项目中大量运用,它的作用是写通用代码时,有一些差异化的逻辑需要处理,这时可以把这些差异化的逻辑写在模板里,程序直接调 ...

  3. 你的 Sleep 服务会梦到服务网格外的 bookinfo 吗

    简介: ASM 产品是基于社区 Istio 定制实现的,在托管的控制面侧提供了用于支撑精细化的流量管理和安全管理的组件能力.通过托管模式,解耦了 Istio 组件与所管理的 K8s 集群的生命周期管理 ...

  4. 基于 K8s 的交付难题退退退！| 独家交付秘籍（第三回）

    简介: 经过仔细研究,我们发现秘籍中提到许多帮助解决交付问题的招式,而其中一个让我们印象很深,是关于在原有社区版容器底座 Kubernetes(以下简称 K8s)的基础上,对容器底座进行改进,可更好的 ...

  5. IPv6时代，中小企业该如何布局？

    ​简介:IPv6要为全世界的每一粒沙子都分配一个IP,你的企业跟上了吗? 11月中旬,中央网信办等部门联合印发了<关于开展IPv6技术创新和融合应用试点工作的通知>,联合组织开展IPv6技 ...

  6. [DApp] Moralis 生产阶段的服务安全设置 -锁定数据库

    Moralis 的基础设施数据库是使用的 MongoDB,其非常适合Dev阶段的快速开发. 如果进入生产环境,需要锁定数据库,防止任何用户可利用SDK向Mongo插入多余数据. 另外,Moralis ...

  7. WPF 给 Pen 的 DashStyle 设置 0 0 的虚线数组将会让渲染线程消耗大量 CPU 资源

    给 WPF 的 Pen 的 DashStyle 属性设置 0 0 的虚线,在绘制几何图形时,绘制的几何图形的尺寸将关联渲染线程所使用的 CPU 资源.大约在周长大于 500 时,将可以从任务管理器上看 ...

  8. 2018-3-8-WPF-UncommonField-类型是什么

    title author date CreateTime categories WPF UncommonField 类型是什么 lindexi 2018-3-8 16:25:2 +0800 2018- ...

  9. Python竖版大屏2 | 用pyecharts开发可视化的奇妙探索！

    目录 1.SHINE主题 2.LIGHT主题 3.MACARONS主题 4.INFOGRAPHIC主题 5.WALDEN主题 6.WESTEROS主题 7.WHITE主题 8.WONDERLAND主题 ...

  10. 03. Ruby入门理解

    Ruby入门学习: 视频教程 https://www.bilibili.com/video/BV1QW411F7rh?t=401&p=1 笔记 https://github.com/haima ...