<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. 链栈的实现 C语言/C++

    堆栈的链式存储C/C++实现--链栈 与顺序栈相比,链栈的优点在于不存在栈满上溢的问题.链栈通常使用单链表实现,进栈.出栈操作就是在单链表表头的 插入.删除操作.用单链表实现链栈时,使用不带头结点的单 ...

  2. HarmonyOS NEXT应用开发之Axios获取解析网络数据

    介绍 本示例介绍使用第三方库的Axios获取GBK格式的网络数据时,通过util实现GBK转换UTF-8格式.该场景多用于需要转换编码格式的应用. 效果图预览 使用说明 直接进入页面就可获取GBK格式 ...

  3. SAE助力「海底小纵队学英语」全面拥抱Serverless，节省25%以上成本

    简介: 阿里云Serveless应用引擎SAE 具备免运维IaaS.按需使用.按量计费.低门槛服务应用上云,并且支持多种语言和高弹性能力等特点,刚好完美解决了客户长期以来运维复杂.资源利用率不高.开发 ...

  4. Quick BI产品核心功能大图（五）移动端：让数据在更多业务场景中流通

    ​简介:将数据更好的融入日常工作中,一个重要的前提条件就是多端多渠道的数据触达和办公协同能力. Quick BI凭借移动端交互体验,帮助用户随时随地便捷查看报表,并通过在线协同方式,追踪策略的执行落地 ...

  5. 2021云栖大会开源引力峰会重磅发布的战略合作，Grafana服务到底是什么？

    简介: 这几天关注云栖大会的小伙伴一定会发现阿里巴巴合伙人.阿里云高级研究员蒋江伟(小邪)在云栖大会开源引力峰会的演讲中,特别提到了一个叫 Grafana 服务的产品,并特意花费一页 PPT 介绍了这 ...

  6. [Go] Viper 加载项目配置，go build 打包配置文件进二进制

    Viper 的传统用法局部,加载到某个 package 下的全局变量后,其它 package 可以继续使用. var Conf *viper.Viper func init() { // File n ...

  7. dotnet core 3.1 将 UWP 控件嵌入到 WPF 应用 收到 UIA 消息主线程卡住

    本文记录一个问题,此问题是在 .NET Core 3.1 的 WPF 应用里面,嵌入 UWP 控件之后,在收到 UIA 的消息时,可能让主线程卡住.暂时此问题还不知道具体的复现步骤,此问题预计和 WP ...

  8. dotnet OpenXML 解析 PPT 里表格的样式

    在 PPT 里面的表格可以通过表格样式配置决定表格的样式,本文将和大家介绍如何获取和解析表格的样式 本文属于 OpenXML 系列博客,有一定的上下文,详细请参阅 Office 使用 OpenXML ...

  9. dotnet 教你写一个可以搞炸本机所有 WCF 应用的程序方法

    作为团队里面挖掘机出身的我,怎么能不多挖一些坑好将小伙伴们都埋进去呢.本文来告诉大家一个有趣且简单的方法,此方法可以将本机的 WCF 玩坏,不敢说真的搞炸本机所有 WCF 应用,但搞炸大部分基于 WC ...

  10. ESP32 分区表

    当你编译程序,发现 app partition is too small for binary 错误的时候,就涉及到 ESP32 分区表的内容了. 一.基本概念 在了解分区之前,先了解一下以下概率,便 ...