鼠标拖动盒子移动

1.创建一个盒子，绑定mousedown、mouseup 、mousemove事件

<script>
    let demo = document.querySelector('.demo')
    let canMove = false
    let x = 0, y = 0
    demo.onmousedown = function (e) {
        x = e.pageX - demo.offsetLeft
        y = e.pageY - demo.offsetTop
        canMove = true
    }

    window.onmouseup = function () {
        canMove = false
    }
    window.onblur = function () {
        canMove = false
    }

    window.onmousemove = function (e) {
        e.preventDefault();  // 阻止默认行为
        if (canMove) {
            let left = e.pageX - x
            let top = e.pageY - y
            if (left < 0) left = 0
            if (top < 0) top = 0

            let maxLeft = window.innerWidth - demo.offsetWidth
            let maxTop = window.innerHeight - demo.offsetHeight
            if (left > maxLeft) left = maxLeft
            if (top > maxTop ) top = maxTop

            demo.style.left = left + "px"
            demo.style.top = top- y + "px"
        }
    }

</script>