原生js实现拖拽

最新推荐文章于 2025-04-11 13:51:40 发布

哒玲

最新推荐文章于 2025-04-11 13:51:40 发布

阅读量365

点赞数

分类专栏： JavaScript 文章标签：拖拽

本文链接：https://blog.youkuaiyun.com/zl13015214442/article/details/89477024

版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript实现元素的拖拽功能。关键在于理解浏览器提供的坐标属性，如`offsetTop`和`offsetLeft`来获取元素位置，以及`event.clientY`和`event.clientX`获取鼠标位置。在拖拽过程中，通过监听`mousedown`、`mousemove`和`mouseup`事件，计算元素的新位置并实时更新，最终实现元素随鼠标移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 预备知识

offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop
作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:
调用者：event.clientX/clientY
作用：鼠标距离浏览器可视区域的距离（左、上）。
pageY/pageX:
调用者：event.pageX/pageY
作用：获取鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
screenY/screenX:
调用者：
作用：获取鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY:
调用者：event.clientX/clientY
作用：获取鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

其中：pageY和pageX的兼容写法：
在页面位置就等于 = 看得见的（当前浏览器）+ 看不见的（被卷去的）
即pageY/pageX = event.clientY/clientX + scroll().top/scroll().left

2. 实现拖拽

拖拽过程中依次触发的事件：mousedown、mousemove、mouseup

在鼠标点击（mousedown）的那一瞬间，获取到鼠标在盒子中的相对位置（一旦mousedown就是固定的值）；
然后在鼠标点击并移动（mousemove）的过程中，这时鼠标在页面中的位置随之改变，获取位置，并减去鼠标在盒子中的位置，获取到了盒子此时应该在网页中的位置，但是最后将该位置值赋给盒子就可以实现盒子的移动了；
当鼠标弹起（mouseup），要对mousemove进行事件的解绑。

完整的实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>

    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：在指定位置按住鼠标左键移动对话框。
            //分析：鼠标按下，触动事件，移动再更换对话框的位置。
            //鼠标按下onmousedown   鼠标弹起:onmouseup   鼠标移动onmousemove
            //步骤：
            //1.老三步和新五步
            //2.把鼠标的坐标赋值给对话框。

            var box = document.getElementById("d_box");
            var drop = document.getElementById("drop");
            //1.老三步和新五步
            //先按下，再移动触动此事件
            drop.onmousedown = function (event) {
                // 获取鼠标在盒子中的坐标（只要点击后就是固定的值），将来移动的时候减去保证鼠标在盒子的指定位置
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                var x = pagex - box.offsetLeft;
                var y = pagey - box.offsetTop;
                
                 // 2.把鼠标的坐标赋值给对话框。
                document.onmousemove = function (event) {
                    event = event || window.event;
                    var xx = event.pageX || scroll().left + event.clientX;
                    var yy = event.pageY || scroll().top + event.clientY;
                    //二次操作鼠标位置  减去鼠标在盒子中的坐标，得到盒子应该在网页中的位置（动态的）
                    xx = xx - x;
                    yy = yy - y;
                    //给box赋值，确定盒子跟着鼠标走
                    box.style.left = xx + "px";
                    box.style.top = yy + "px";
                    //禁止文本选中（选中后取消）
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            };

            //事件解绑
            drop.onmouseup = function () {
                //解绑
                document.onmousemove = null;
            }
        }
    </script>

</head>
<body>
<!--顶部注册部分，无用-->
    <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
<!--我们移动的对话框-->
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">
            <i>注册信息 (可以拖拽)</i>
            <span id="box_close">【关闭】</span>
        </div>
        <div class="bd"></div>
    </div>
</body>
</html>