拖拽```html/** 拖拽 1. 触发的事件源 box div box div / document box div

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: slateblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    /**
        拖拽 
            1. 触发的事件源
                box div
                box div / document
                box div
            2. 触发的事件类型
                按下
                移动
                抬起
            3. 移动的距离
                最新的定位 - 鼠标按下时的定位 === 移动的距离
            4. 移动到哪里
                元素的初始位置 + 移动的距离 === 移动到哪里
    */
    <script>
        const box = documen.querySelector(".box")
        // 声明一个变量当作开关，默认为关闭状态，用于控制移动事件的执行
        let flag = false
        // 保存鼠标按下时的定位
        let startX = 0
        let startY = 0
        // 保存鼠标按下时元素的位置
        let startLeft = 0
        let startTop = 0
        // 按下
        box.onmousedown = function(e) {
            // 开启开关
            flag = true
            // 保存鼠标按下时的定位
            startX = e.clientX
            startY = e.clientY
            // 保存鼠标按下时的偏移量
            startLeft = box.offsetLeft
            startTop = box.offsetTop
        }
        // 移动
        // 使用 box 鼠标会跟不上元素移动
        document.onmousemove = function(e) {
            if(flag === false) return
            // 计算移动的距离
            // 最新的定位 - 鼠标按下时的定位
            let moveX = e.client - startX
            let moveY = e.client - startY
            // 计算移动到哪里
            let left = startLeft + moveX
            let top = startTop + moveY
            // 设置边界
            if(left < 0) {left = 0}
            if(top < 0) {top = 0}
            let maxLeft = document.documentElement.clientWidth
            let maxTop = document.documentElement.clientHeight
            if(left > maxLeft) {left = maxLeft}
            if(top > maxTop) {top = maxTop}
            // 重新修改元素定位，完成拖拽
            box.style.left = left + "px"
            box.style.top = top + "px"
        }
        // 抬起
        box.onmouseup = function () {
            // 关闭开关
            flag = false
        }
    </script>