<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. 说说你对Node.js 的理解？优缺点？应用场景？

    一.是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核),利用事件驱动.非阻塞和异步输 ...

  2. 力扣511(MySQL)-游戏玩法分析Ⅰ（简单）

    题目: 活动表 Activity: 写一条 SQL 查询语句获取每位玩家 第一次登陆平台的日期. 查询结果的格式如下所示:  解题思路: 方法一:使用dense_rank() over(partiti ...

  3. 力扣175(MySQL)-组合两个表（简单）

    题目: 表: Person 表: Address 编写一个SQL查询来报告 Person 表中每个人的姓.名.城市和州.如果 personId 的地址不在 Address 表中,则报告为空  null ...

  4. 怀里橘猫柴犬，掌上代码江湖——对话阿里云 MVP郭旭东

    简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...

  5. EventBridge消息路由｜高效构建消息路由能力

    ​简介:企业数字化转型过程中,天然会遇到消息路由,异地多活,协议适配,消息备份等场景.本篇主要通过 EventBridge 消息路由的应用场景和应用实验介绍,帮助大家了解如何通过 EventBridg ...

  6. 阿里云贾扬清：大数据+AI工程化，让数据从「成本」变为「资产」

    简介: 近年来,数字经济发展迅速,企业转型背后频频涌现「数字力量」的身影.云计算.大数据.人工智能的快速融合形成了数字经济的新基建,也为数字经济发展带来了新的机遇. 5 月 20 日,阿里巴巴副总裁. ...

  7. [FAQ] 部署二进制运行时 go-ego/gse 如何正确加载分词字典

    运行Golang编译后二进制运行时,此时运行二进制时所在目录就是Golang源码程序认为的根目录了. 所以只需要把字典文件拷贝到与二进制所在同一目录内,然后使用 seg.LoadDict('dicti ...

  8. RT-Thread 堆区大小设置

    一.利用栈区的空间作为堆区 看过我之前的笔记的小伙伴都知道,以前我是通过申请栈区的空间使用的,感兴趣的小伙伴可以看我之前的笔记,RT-Thread移植到stm32. 在board.c文件文件中的代码如 ...

  9. STM32 USART串口通信

    一.介绍 通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间进行全双工数据交换.USART利用分数波特率发生器提供宽范围的波特率选择.它支持同步单向 ...

  10. vue解决二级路由redirect（默认路由）不传参的问题

    场景: pageA----pageB(pageB包含三个二级路由) 默认进入pageB时进入第一个页面的路由,之后点击左侧按钮,分别进入其他二级路由 原router.js写法: //应用信息      ...