Event事件学习实用路线（10）——Event事件之拖拽原理思路详解

最新推荐文章于 2023-02-25 15:16:57 发布
最新推荐文章于 2023-02-25 15:16:57 发布
阅读量367 收藏
点赞数
分类专栏： # JS——Event事件 Web前端 原生JavaScript 文章标签： js javascript html 前端 event
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/105763879
版权

Event事件之拖拽原理思路详解



拖拽原理思路详解



涉及事件


鼠标按下： mousedown
鼠标移动 ：mousemove => 不断的改变元素的 top / left
鼠标抬起 ：mouseu


原理图解


如图假如对div进行拖拽：
在这里插入图片描述
连接拖拽点
在这里插入图片描述
它的横纵坐标变化：就是增加移动的距离

在这里插入图片描述

拖拽实现


思路


  1. 保存鼠标点击的初始位置
    startPos

  2. 保存元素的初始位置
    boxPos

  3. 保存鼠标移动的位置
    nowPos

  4. 计算鼠标移动的差值
    dis

  5. 计算元素移动的距离
    newBoxPos

  6. 设置元素最终的位置
    div.style.top
    div.style.left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置

            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);
                console.log(boxPos.x);

                div.addEventListener("mousemove", (e)=>{
                    var nowPos = {
                        x : e.clientX,
                        y : e.clientY
                    }

                    var dis = {
                        x : nowPos.x - startPos.x,
                        y : nowPos.y - startPos.y
                    }

                    var newBoxPos = {
                        left : boxPos.x + dis.x,
                        top : boxPos.y + dis.y
                    }

                    div.style.top = newBoxPos.top + 'px';
                    div.style.left = newBoxPos.left + 'px';
                });
            });
        }
    </script>
</body>
</html>

运行结果仍然存在问题：
如果鼠标拖拽过快，鼠标甩出div，而事件只能在div上，div就脱离控制了。
在这里插入图片描述
解决办法：将鼠标移动事件，添加到document上

        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置

            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);
                console.log(boxPos.x);

                document.addEventListener("mousemove", (e)=>{
                    var nowPos = {
                        x : e.clientX,
                        y : e.clientY
                    }

                    var dis = {
                        x : nowPos.x - startPos.x,
                        y : nowPos.y - startPos.y
                    }

                    var newBoxPos = {
                        left : boxPos.x + dis.x,
                        top : boxPos.y + dis.y
                    }

                    div.style.top = newBoxPos.top + 'px';
                    div.style.left = newBoxPos.left + 'px';
                });
            });
        }

但松开鼠标事件还没做，我们把它补充上。
在这里插入图片描述

注意：清除事件 - 必须清除的是命名函数！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置



            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);

                document.addEventListener("mousemove", drag);
            });

            div.addEventListener("mouseup", ()=>{
                document.removeEventListener("mousemove", drag);
            });

            function drag(e){
                var nowPos = {
                    x : e.clientX,
                    y : e.clientY
                }

                var dis = {
                    x : nowPos.x - startPos.x,
                    y : nowPos.y - startPos.y
                }

                var newBoxPos = {
                    left : boxPos.x + dis.x,
                    top : boxPos.y + dis.y
                }

                div.style.top = newBoxPos.top + 'px';
                div.style.left = newBoxPos.left + 'px';
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

代码优化


清除事件应该将其代码加在mousedown中，因为逻辑上应该是鼠标按下的时候，才再加当前document的鼠标移动和抬起的两个事件。
这样避免事件加多个，引起冲突。
我们来看看鼠标清除事件执行多少遍：

        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置



            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);

                document.addEventListener("mousemove", drag);

                var i = 1;

                div.addEventListener("mouseup", ()=>{
                    console.log(i++);
                    document.removeEventListener("mousemove", drag);
                });
            });


            function drag(e){
                var nowPos = {
                    x : e.clientX,
                    y : e.clientY
                }

                var dis = {
                    x : nowPos.x - startPos.x,
                    y : nowPos.y - startPos.y
                }

                var newBoxPos = {
                    left : boxPos.x + dis.x,
                    top : boxPos.y + dis.y
                }

                div.style.top = newBoxPos.top + 'px';
                div.style.left = newBoxPos.left + 'px';
            }
        }

我们会发现移动次数越多，清除事件的执行次数就越多，原因是只要按下一次鼠标，就给div增加一个鼠标抬起事件，因此就会累加很多该事件。
在这里插入图片描述
为了提高性能：只需绑定一次清除事件。

        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置



            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);

                document.addEventListener("mousemove", drag);

                var i = 1;

                div.addEventListener("mouseup", ()=>{
                    console.log(i++);
                    document.removeEventListener("mousemove", drag);
                },{
                    // 只绑定一次事件
                    once:true
                });
            });


            function drag(e){
                var nowPos = {
                    x : e.clientX,
                    y : e.clientY
                }

                var dis = {
                    x : nowPos.x - startPos.x,
                    y : nowPos.y - startPos.y
                }

                var newBoxPos = {
                    left : boxPos.x + dis.x,
                    top : boxPos.y + dis.y
                }

                div.style.top = newBoxPos.top + 'px';
                div.style.left = newBoxPos.left + 'px';
            }
        }

现在接触绑定就只执行一次了。
在这里插入图片描述

实现限制范围的拖拽


实际拖拽过程中，放在边缘会出去一部分。
左侧的时候：left只要不是负值，div就不会出去了。
限制左侧：left不能是负值。
限制右侧：浏览器可视区宽度 - div宽度，它的left不能超过这个距离。
上下限制也同理，xiao迪就不再解释了。
在这里插入图片描述

在这里插入图片描述

        {
            let div = document.querySelector('div');

            var startPos = {} // 1. 鼠标点击的位置

            var boxPos={} // 2. 元素的初始位置



            div.addEventListener("mousedown", (e)=>{
                // 保存
                // 初始鼠标位置
                startPos.x = e.clientX;
                startPos.y = e.clientY;

                // 元素的初始位置
                boxPos.x = parseFloat(getComputedStyle(div).left);
                boxPos.y = parseFloat(getComputedStyle(div).top);

                document.addEventListener("mousemove", drag);

                var i = 1;

                div.addEventListener("mouseup", ()=>{
                    console.log(i++);
                    document.removeEventListener("mousemove", drag);
                },{
                    // 只绑定一次事件
                    once:true
                });
            });


            function drag(e){
                var nowPos = {
                    x : e.clientX,
                    y : e.clientY
                }

                var dis = {
                    x : nowPos.x - startPos.x,
                    y : nowPos.y - startPos.y
                }

                var newBoxPos = {
                    left : boxPos.x + dis.x,
                    top : boxPos.y + dis.y
                }

                // 限制左侧
                if (newBoxPos.left < 0){
                    newBoxPos.left = 0;
                }
                
                // 限制右侧
                var maxLeft = document.documentElement.clientWidth - div.offsetWidth;
                if (newBoxPos.left > maxLeft){
                    newBoxPos.left = maxLeft;
                }

                // 限制上侧
                if (newBoxPos.top < 0){
                    newBoxPos.top = 0;
                }

                // 限制下侧
                var maxTop = document.documentElement.clientHeight;
                if (newBoxPos.top > maxTop) {
                    newBoxPos.top = maxTop;
                }

                div.style.top = newBoxPos.top + 'px';
                div.style.left = newBoxPos.left + 'px';
            }
        }

在这里插入图片描述



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端拖拽模型
weixin_45679977的博客
12-01 206
touchstart
拖拽事件思路及所学知识点
wuli_ping的博客
04-16 175
拖拽时间思路： 1、鼠标按下时的事件对象操作 （找到鼠标距离盒子的边距） 2、鼠标移动时对事件对象的操作 （计算出鼠标移动时盒子移动的距离 写出浏览器的可见高度和可见宽度 计算出盒子可以移动的最大距离） 3、当鼠标松开时，将鼠标移动事件清空 HTML部分 <body> <div id="box"></div> </...
event鼠标拖拽（弹框移动）
lxb1113220682的博客
12-28 418
鼠标拖拽效果很常见，例如百度的登录页，点击登录会弹出一个窗口，并且这个窗口可以拖动；首先，要涉及到鼠标的三个事件，分别为鼠标按下、移动、松开；onmousedown onmousemove onmouseup 下面是代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
事件（event）练习——拖拽事件
weixin_44522602的博客
03-26 220
参考：b站尚硅谷
event 事件机制的原理
waterwan的专栏
12-13 1096
第一次接触事件这个概念，对于我来讲，还是挺难理解的。 最后，想通了，就是事件就相当于一个委托对象。 以下例子，实现同样的效果，分别用事件与委托对象的代码。 你会觉得还是事件好点。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using
JS中的事件详解
01-08
事件冒泡是指事件从最具体的元素开始，向上逐级传播到最不具体的元素（`document`对象），可以通过`event.stopPropagation()`来阻止事件冒泡。为了兼容旧版IE，可以使用`event.cancelBubble = true`。此外，`event....
qt5 鼠标 拖拽 事件 —— 编程 教学 游戏 demo
07-15
**鼠标事件详解** 1. **mousePressEvent**: 当鼠标按钮被按下时触发，这是开始拖拽操作的信号。通常，我们在此事件中记录鼠标的初始位置。 2. **mouseMoveEvent**: 在鼠标移动时不断触发。在处理拖拽操作时，我们...
关于javascript冒泡与默认事件的使用详解
09-05
JavaScript中的冒泡与默认事件是理解事件处理机制的关键概念，尤其在构建交互式的网页应用时。本文将深入探讨这两个概念，并通过示例代码进行详细解释。 首先，让我们了解什么是事件冒泡。事件冒泡是指当一个事件...
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
11-20
本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考，具体如下： 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model...
拖放事件原理及实现详解
07-18
此外，由于跨浏览器兼容性问题，我们需要使用事件修饰符，如`event.preventDefault()`和`event.stopPropagation()`来确保在不同浏览器上的一致行为。 在实际项目中，`define_media`可能是一个包含媒体资源或者与...
拖拽事件一
407指导员
11-14 742
拖拽事件一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽练习</title> <style> #box1 { width: 100px; height: 100px; background-color: red;
event事件的各种距离含义
L_Lintellect的博客
08-10 789
​ 通过js控制页面布局时，会有动态获取系统的距离，总结了一下几种方法。以下都是都是不带参数的 1、浏览器可视化窗口大小 ​ 所谓可视化是指我们能够看得到的地方，用来展示html内容窗口，其中不包括检查部分和浏览器头部部分的。 window.innerHeight 浏览器可视化窗口的高度， window.innerWidth 浏览器可视化窗口的宽幅 2、当前浏览器大小 ​ 指的是整...
vue-draggable浏览器拖拽event事件对象拖动时 DragEvent path undefined
最新发布
qq_41742839的博客
02-25 1275
vue-draggable的path属性不存在 e.path是Chrome单独支持的属性，不属于MDN的标准，所以在MDN上搜不到event.path，但是composedPath是标准的属性。在分析FireFox的event对象时发现，event.target对象中的parentNode就是上层的父元素DOM节点。高兴的将上述代码拿到项目中尝试发现，WTF？（难道是自定义事件的锅吗？然后在项目中使用这个方法做一个兼容即可。
event事件知识整理
weixin_小白鼠的博客
04-16 1250
事件 事件流 事件冒泡 从最具体的元素（文档树中最深的节点）开始触发，然后上传播 事件捕获 从最不具体的节点最先接收到事件，最具体的节点最后收到事件 dom事件流 事件流分为三个阶段：事件捕获=》到达目标事件=》事件冒泡 事件的目标在捕获阶段捕获接收到事件，因为到达目标元素前就结束捕获了 事件处理程序 <style> .dad { background-color: aqua; width: 200px; height: 200
Javascript拖拽原理
qq_38763173的博客
02-13 476
一、拖拽的原理 1、鼠标按下（onmousedown） 拿到元素的初始位置和鼠标的初始位置 2、鼠标移动（onmousemove） 拿到鼠标最后的位置，计算出鼠标的距离差，并根据距离差求出元素的最终位置 元素最终的位置 = 元素的初始位置 + 鼠标的距离差 3、鼠标松开（onmouseup） 在up事件当中需要将鼠标的move事件和up事件一起解绑 pc端mousemove事件不会自动解绑，我们需...
js实现拖拽事件
lizhengxv的博客
03-20 9988
HTML &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;/body&gt; CSS div{ position: absolute; width: 200px; height: 200px; background: #369 } JS window....
利用监听事件做一个判断是在x方向还有y方向上面的判断，判断在屏幕上滑动的趋势
yu265096的专栏
12-05 482
auto dis = Director::getInstance()->getEventDispatcher();     auto listener = EventListenerTouchOneByOne::create();          listener->onTouchBegan = [=](Touch * t, Event *e){         sta
拖拽事件的原理
weixin_34072857的博客
03-19 89
先奉上代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 10...
Event事件对象之鼠标_键盘事件对象
zzzzz周绍辉的博客
08-13 834
以下大部分事件的浏览器支持 google IE firefox safari opera true true true true true 属性1. altKey返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了返回值true,false,1,0表达的都是布尔关系。event.altKey=true|false|1|0<!DOCTYPE ht
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值