<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. 【走进RDS】之SQL Server性能诊断案例分析

    简介: 数据库性能诊断不仅对其数据库技能要求较高,而且需要大量的前期准备工作,如收集各种性能基线.性能指标和慢SQL日志等,尤其是面对多数据库性能调优时,往往事倍功半. 客户的困扰 前几天某程序员小王 ...

  2. KubeVela 正式开源：一个高可扩展的云原生应用平台与核心引擎

    美国西部时间 2020 年 11 月 18 日,在云原生技术"最高盛宴"的 KubeCon 北美峰会 2020 上,CNCF 应用交付领域小组(CNCF SIG App Deliv ...

  3. Spring Boot 微服务性能下降九成！使用 Arthas 定位根因

    简介: 接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测不达标. 背景 接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测 ...

  4. Kubernetes 稳定性保障手册：洞察+预案

    简介: 稳定性保障是个复杂的话题,需要有效.可迭代.可持续保障集群的稳定性,系统性的方法或许可以解决该问题. 作者 | 悟鹏来源 | 阿里巴巴云原生公众号 <Kubernetes 稳定性保障手册 ...

  5. Flink + Iceberg + 对象存储，构建数据湖方案

    ​简介: 上海站 Flink Meetup 分享内容,如何基于Flink.对象存储.Iceberg 来构建数据湖生态. 本文整理自 Dell 科技集团高级软件研发经理孙伟在 4 月 17 日 上海站 ...

  6. 当Java遇上机密计算，又一段奇幻之旅开始了！

    ​简介: 汪少军:如何为Java业务提供机密计算保护? ​ 写在前面 在信息世界里,数据存在三种状态: 存储态.传输态和计算态.存储在数据库或磁盘中的数据属于存储状态,在网络中传输的数据属于传输状态, ...

  7. [FAQ] 在 Mac 系统上 yarn add canvas 安装失败的原因

      当使用 yarn add 安装某个 node 库时,如果出现失败,多半是由于 nodejs 版本问题引起的. 现在我们可以使用 nvm 方便的管理不同的 nodejs 进行随时切换. $ nvm ...

  8. ARM 反汇编速成

    1.跳转指令 B   无条件跳转 BL 带链接的无条件跳转 BX 带状态切换的无条件跳转 BLX   带链接和状态切换的无条件跳转 B  loc_地址 BNE, BEQ 2.存储器与寄存器交互数据指令 ...

  9. [Trading] 关于短线交易 Day Trading 的知识

    短线交易员操纵市场,试图利用股票.期货和其他金融产品价值的短期波动. 以下是你需要知道的关于日交易的知识,包括免费的交易图表,交易策略,以及日交易软件和平台. https://www.thebalan ...

  10. Visual Studio 2019 自带混淆工具DotFuscator不需要去网络下载

    http://t.zoukankan.com/daizhipeng-p-13492298.html 大家是否还在困扰发布的项目dll容易被人反编译呢,VS2019默认是没有安装DotFuscator的 ...