鼠标移动盒子

159 阅读1分钟
#demo {
        width: 300px;
        height: 300px;
        background-color: #ccc;
        position: absolute;
}
<div id="demo"></div>
<script>
    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.onmousemove = function (e) {
        if (canMove) {
            demo.style.left = e.pageX - x + "px"
            demo.style.top = e.pageY - y + "px"
        }
    }
</script>