js拖动效果

理解思路：

1、先创建一个id为demo的盒子，再设置盒子的样式

2、获取id为demo的盒子

3、监听鼠标事件

4、设置全局变量用来控制鼠标移动事件

5、给盒子设定位，设置盒子的距离

6、阻止浏览器默认事件

7、监听浏览器聚焦事件

8、判断盒子是否超出可视窗口

技术实现：

HTML:

CSS: #dome { width: 300px; height: 300px; background-color: wheat; position: absolute; }

let demo = document.querySelector("#demo")//获取demo的盒子

let canmove = false//设置全局变量控制鼠标移动事件

let x = 0, y = 0

dome.onmousedown = function (e) {//监听鼠标按下事件

//获取鼠标当前位置到盒子左侧与上侧的距离

 x = e.pageX - dome.offsetLeft
 y = e.pageY - dome.offsetTop

        canmove = true
    }

window.onmouseup = 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 - dome.offsetWith
            let maxtop = window.innerHeight- dome.offsettop
            //设置盒子定位的位置
            dome.style.left = left + "px
            dome.style.top = top + "px"
        }
    }