手写拖拽div```html <!DOCTYPE html> <html lang="en"> <head> <meta

<!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>
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <script>
            let box = document.querySelector('.box')
            let isDrag = false // 用来判断是否在移动div
            let position = null // 用来存储当前的x，y
            box.addEventListener('mousedown', e => {
                isDrag = true
                // 记录当前的x，y
                position = [e.clientX, e.clientY]
            })
            document.addEventListener('mousemove', e => {
                //先进行判断如果isDrag为false就不做任何操作
                if (!isDrag) {
                    return
                }
                // 记录移动后的x，y
                let x = e.clientX
                let y = e.clientY
                // 计算移动的差值
                let xDiff = x - position[0]
                let yDiff = y - position[1]
                // 这里获取到原始的left、top
                let left = parseInt(box.style.left || 0)
                let top = parseInt(box.style.top || 0)
                // 更新left、top
                box.style.left = `${left + xDiff}px`
                box.style.top = `${top + yDiff}px`
                // 更新position
                position = [x, y]
            })
            document.addEventListener('mouseup', e => {
                isDrag = false
            })
        </script>
    </body>
</html>