<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. 记一次 Go 调用系统命令出现的问题分析

    首先在程序中封装了下面一个函数用来执行系统命令: // 执行系统命令 func executeCommand(command string, output, outerr io.Writer) err ...

  2. mockjs 模拟实现增删改查

    /*mUtils.js用于解析get请求的参数*/ export const param2Obj = url => { const search = url.split('?')[1] if ( ...

  3. 05_理解MVVM模型

    总结: MVVM模型:         1.M:模型(Model):data中是的数据         2.V:视图(View):模板代码         3.VM:视图模型(ViewModel):V ...

  4. HarmonyOS NEXT应用开发—听歌识曲水波纹特效案例

    介绍 在很多应用中,会出现点击按钮出现水波纹的特效. 效果图预览 使用说明 进入页面,点击按钮,触发水波纹动画. 再次点击按钮,停止水波纹动画. 实现思路 本例涉及的关键特性和实现方案如下: 要实现存 ...

  5. HarmonyOS NEXT应用开发—自定义视图实现Tab效果

    介绍 本示例介绍使用Text.List等组件,添加点击事件onclick,动画,animationTo实现自定义Tab效果. 效果预览图 使用说明 点击页签进行切换,选中态页签字体放大加粗,颜色由灰变 ...

  6. 如何合理使用 CPU 管理策略，提升容器性能？

    ​简介:CPU Burst.拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器,它们解决了不同场景下的 CPU 资源管理,可以共同使用.点击下文,查看详情! 作者:张佐玮(佑祎) 前言 在云 ...

  7. 图像检索在高德地图POI数据生产中的应用

    ​简介: 高德通过自有海量的图像源,来保证现实世界的每一个新增的POI及时制作成数据.在较短时间间隔内(小于月度),同一个地方的POI 的变化量是很低的. ​ 作者 | 灵笼.怀迩 来源 | 阿里技术 ...

  8. 阿里云消息队列 RocketMQ 5.0 全新升级：消息、事件、流融合处理平台

    ​简介: RocketMQ5.0 的发布标志着阿里云消息从消息领域正式迈向了"消息.事件.流"场景大融合的新局面.未来阿里云消息产品的演进也将继续围绕消息.事件.流核心场景而开展. ...

  9. 深度干货｜云原生分布式数据库 PolarDB-X 的技术演进

    简介: 深入解读PolarDB-X的产品架构,以及分布式事务.透明分布式.水平扩展等技术内幕. 一.PolarDB-X是什么 PolarDB-X最早起源于阿里集团2009年提出用分布式架构替代传统商业 ...

  10. [Auth] 浅谈 jwt token 的妙处

    无状态(易扩展). 有过期时间限制,相对安全(可以有多个有效的 token). 更轻量(适合少量信息),类似传统 query string 签名方式. 标准统一(跨语言). Refer:JWT Aut ...