javescript的原生代码写法
1.首先获取到需要拖拽的div

 let dd = document.getElementsByClassName('dd')[0]  

2.设置这个div需要的事件

 dd.onmousedown = function () {
    }
 dd.onmouseup = function () {
    }
 window.onmousemove = function () {
 }

3.获取鼠标的位置

 window.onmousemove = function (e) {
    let mx = e.clientX
    let my = e.clientY
    console.log(mx)
    console.log(my)
 }

4.把块元素设置为position：absolute，没设置的话无法让div移动，left和top用js来设置

5.然后在函数中添加dd的left和top

 window.onmousemove = function (e) {
    let mx = e.clientX
    let my = e.clientY
    console.log(mx)
    console.log(my)
    dd.style.left = mx  + 'px'
    dd.style.top = my  + 'px'
 }

这样块会随着鼠标移动，但块的左上角会合鼠标重合

6.开始设置鼠标点击块的随动和松开鼠标的块的不动，创建一个开关

 let kg = false
dd.onmousedown = function (e) {
        //点击之后开关变成true
        kg = true
    }
//把松开事件从块变成整个window，松开之后开关变成false
window.onmouseup = function () {
        kg = false
    }  

7.获取鼠标点击之后在盒子上的位置，可以获取鼠标点击页面的距离，在减去盒子到页面边距的距离，算出鼠标点击在盒子上的距离

 let hx, hy;
 dd.onmousedown = function (e) {
        kg = true
        hx = e.clientX - dd.offsetLeft
        hy = e.clientY - dd.offsetTop
    }

8.这样块就会随着鼠标点击的地方被拖拽

    window.onmousemove = function (d) {
        if (kg) {
            d.preventDefault();
            let mx = d.clientX
            let my = d.clientY
            dd.style.left = mx - hx + 'px'
            dd.style.top = my - hy + 'px'
        }
    }

9.设置鼠标拖拽不出页面，设置dd距离左边的距离小于0是把距离固定在0，上边同理

    ////在window.onmousemove = function下面添加
     if (dd.offsetLeft <= 0) {
            dd.style.left = '0px'
        }
    if (dd.offsetTop <= 0) {
            dd.style.top = '0px'
        }  

10.获取页面大小，在减去块的宽高，在判断和块的距离，大于就固定住块的距离

//获取页面宽度减去盒子的宽高，之后就是盒子不能出去的宽高
    let yemianX = window.innerWidth - dd.offsetWidth
    let yemianY = window.innerHeight - dd.offsetHeight
    
    
    //在window.onmousemove = function下面添加
    if (dd.offsetLeft >= yemianX) {
                dd.style.left = yemianX + 'px'
            }
            if (dd.offsetTop >= yemianY) {
                dd.style.top = yemianY + 'px'
            }

11.最后设置禁止默认事件，防止拖拽块里面的字体，然后页面没获取到松开的开关

        d.preventDefault();

12.设置页面的失去焦点事件

    window.onblur = function () {
        kg = false
    }

总代码

Document

<script>
    let dd = document.getElementsByClassName('dd')[0]
    let kg = false
    //得到鼠标点击之后在盒子上的位置
    let hx, hy;

    //获取页面宽度减去盒子的宽高，之后就是盒子不能出去的宽高
    let yemianX = window.innerWidth - dd.offsetWidth
    let yemianY = window.innerHeight - dd.offsetHeight
    console.log(yemianX);


    dd.onmousedown = function (e) {
        kg = true
        hx = e.clientX - dd.offsetLeft
        hy = e.clientY - dd.offsetTop

    }

    window.onmouseup = function () {
        kg = false

    }
    window.onblur = function () {
        kg = false
    }

    // setTimeout(() => {
    //     alert('sss')
    // }, 2000);
    window.onmousemove = function (d) {
        d.preventDefault();

        if (kg) {
            let mx = d.clientX
            let my = d.clientY
            dd.style.left = mx - hx + 'px'
            dd.style.top = my - hy + 'px'

            if (dd.offsetLeft <= 0) {
                dd.style.left = '0px'
            }

            if (dd.offsetTop <= 0) {
                dd.style.top = '0px'
            }
            console.log(dd.offsetLeft);
            console.log(yemianX);

            if (dd.offsetLeft >= yemianX) {
                dd.style.left = yemianX + 'px'
            }
            if (dd.offsetTop >= yemianY) {
                dd.style.top = yemianY + 'px'
            }
        }
    }
</script>