js原生拖拽（定位实现用了开关思想）

最新推荐文章于 2022-11-15 12:29:52 发布

入门中……

最新推荐文章于 2022-11-15 12:29:52 发布

阅读量168

点赞数 2

分类专栏： js小案例文章标签： javascript html5 css

本文链接：https://blog.csdn.net/m0_59680972/article/details/127099376

版权

js小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

思路（建议先了解开关思想）

拖拽

分析行为:
鼠标移动的时候, 能让 box 跟随移动
鼠标按下以后的移动, 能让 box 跟随移动
鼠标抬起以后的移动, 不需要 box 跟随移动

分析需求:
需要绑定三个事件
=> mousedown : 让 mousemove 的代码可以执行
=> mouseup : 让 mousemove 的代码不可以执行
=> mousemove : 跟随移动
需要给谁绑定事件
=> mousedown : box
=> mouseup : box
=> mousemove : document
如何实现
=> 方案1:
-> 把 move 事件放在 down 事件内进行绑定
-> 把 move 事件在 up 事件内解绑
=> 方案2: 开关（解决bug)
-> 核心, move 事件的代码不执行
-> 准备一个开关, 默认是关闭
-> 在按下的时候打开
-> 在抬起的时候关闭
-> 在移动的时候, 判断, 如果是打开的就执行代码, 如果是关闭的就不执行代码

直接上代码(代码有详细注释）

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: springgreen;
             /* 给定位脱离文档流 */
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let box = document.querySelector("div")
        //鼠标按下事件,鼠标移动事件 => 注意:鼠标移动的过程当中,一定是先鼠标先按下,然后才可以移动
        box.onmousedown = function(e){
            //鼠标按下,其实就是鼠标在移动前,我们要获取鼠标开始的坐标
            let startX = e.offsetX
            let startY = e.offsetY

            //鼠标移动过程当中
            document.onmousemove = function(e){
                //鼠标在移动的过程当中,其实就是盒子要根据鼠标移动
                //鼠标移动,我们要获取鼠标的坐标
                let endX = e.clientX
                let endY = e.clientY

                //求盒子移动的坐标(鼠标移动的坐标)
                let X = endX - startX;
                let Y = endY - startY;


                /* 拖拽的临界值判断 */
                if(X < 50){
                    X = 0;
                }
                if(Y<50){
                    Y=-10;
                }
                if(X > document.documentElement.clientWidth - box.clientWidth){
                    X = document.documentElement.clientWidth - box.clientWidth
                }
                if(Y > document.documentElement.clientHeight - box.clientHeight){
                    Y = document.documentElement.clientHeight - box.clientHeight
                }

                //移动的过程当中,盒子的坐标变化
                box.style.top = Y + "px"
                box.style.left = X + "px"
            }            
        }
        //鼠标抬起事件,就是盒子不要移动
        document.onmouseup = function(){
            //将鼠标移动的事件清空
            document.onmousemove = null;
        }
    </script>
</body>
</html>

升级版，增加了盒子临界值判断，还有一点点磁吸表现

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: springgreen;
             /* 给定位脱离文档流 */
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let box = document.querySelector("div")
        //鼠标按下事件,鼠标移动事件 => 注意:鼠标移动的过程当中,一定是先鼠标先按下,然后才可以移动
        box.onmousedown = function(e){
            //鼠标按下,其实就是鼠标在移动前,我们要获取鼠标开始的坐标
            let startX = e.offsetX
            let startY = e.offsetY

            //鼠标移动过程当中
            document.onmousemove = function(e){
                //鼠标在移动的过程当中,其实就是盒子要根据鼠标移动
                //鼠标移动,我们要获取鼠标的坐标
                let endX = e.clientX
                let endY = e.clientY

                //求盒子移动的坐标(鼠标移动的坐标)
                let X = endX - startX;
                let Y = endY - startY;


                /* 拖拽的临界值判断 */
                if(X < 50){
                    X = 0;
                }
                if(Y<50){
                    Y=-10;
                }
                if(X > document.documentElement.clientWidth - box.clientWidth){
                   
                    X = document.documentElement.clientWidth - box.clientWidth
                }
                if(Y > document.documentElement.clientHeight - box.clientHeight){
                    Y = document.documentElement.clientHeight - box.clientHeight
                }

                //移动的过程当中,盒子的坐标变化
                box.style.top = Y + "px"
                box.style.left = X + "px"
            }            
        }
        //鼠标抬起事件,就是盒子不要移动
        document.onmouseup = function(){
            //将鼠标移动的事件清空
            document.onmousemove = null;
        }
    </script>
</body>
</html>