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

主要思路
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);