原生js实现拖拽，并设置拖拽边界

最新推荐文章于 2023-11-28 11:58:47 发布

boboj1

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量2k

点赞数 4

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/Wind_AN/article/details/117528660

版权

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何通过JavaScript实现元素的拖拽功能，并在拖动过程中限制其边界。主要涉及offsetLeft/offsetTop属性，以及利用e.clientX/e.clientY获取鼠标位置，结合document.documentElement.clientWidth来设定拖拽范围。

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

主要思路
1.首先获取鼠标在方块中的位置，以下用到的知识点

offsetLeft/offsetTop(元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档)
e.clientX/e.clientY

2.移动时鼠标的位置减去按下的时候鼠标在方块中的位置，将这个位置设置边界（range函数）
知识点

document.documentElement.clientwidth返回整个文档的可见宽度

//判断边界问题
//loc当前位置，Min最小位置，max最大位置
function range(loc,min,max) {
    if(loc > max) {
        return max;
    }else if(loc < min) {
        return min;
    }else {
        return loc;
    }
}

在这里插入图片描述

全部代码
index.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: red;position: absolute;}
    </style>
</head>
<body>
    <div id="div"></div>
    <script src="index.js"></script>
</body>
</html>

index.js

let div = document.getElementById("div");
//判断边界问题
function range(loc,min,max) {
    if(loc > max) {
        return max;
    }else if(loc < min) {
        return min;
    }else {
        return loc;
    }
}
//拖拽功能
function drag(eg) {
    eg.onmousedown = function(ev) {
        let e = ev || window.event;
        let eX = e.clientX;
        let eY = e.clientY;
        let disX = eX - eg.offsetLeft;
        let disY = eY - eg.offsetTop;
        document.onmousemove = function(ev) {
            let e = ev || window.event;
            let l = e.clientX - disX;
            let h = e.clientY - disY;
            let windowWidth = document.documentElement.clientWidth;
            let windowHeight = document.documentElement.clientHeight;
            l = range(l,0,windowWidth - eg.offsetWidth);
            h = range(h,0,windowHeight - eg.offsetHeight);
            eg.style.left = `${l}px`;
            eg.style.top = `${h}px`;
        }
    }
    document.onmouseup = function() {
        document.onmousemove = null;
    }
}
drag(div);