百度-鼠标拖拽移动

一、思路

1、创建一个盒子

2、监听 mousedown、mouseup、mousemove事件

3、创建一个机制 let canMove = false 来处理鼠标是否抬起

4、盒子定位、把鼠标的值赋过去

5、阻止默认事件 和浏览器失去焦点

6、控制盒子在浏览器内不出去

<div class="demo">
        <p>ddd</p>
    </div>
    <script>
        let demo = document.querySelector('.demo')
        let canMove = false
        let [x, y] = [0, 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 (top < 0) top = 0
                if (left < 0) left = 0
                let maxLeft = document.documentElement.clientWidth - demo.offsetWidth
                let maxTop = document.documentElement.clientHeight - demo.offsetHeight
                // let maxleft =window.innerWidth-demo.offsetWidth 和上面的是一样的
                if (left > maxLeft) left = maxLeft
                if (top > maxTop) top = maxTop
                demo.style.left = left + 'px'
                demo.style.top = top + 'px'
            }
        }
    </script>