以盒子中心点拖拽盒子

一盒子中心点拖拽盒子

var isOpen = false  //定义一个开关
        var divEl = document.querySelector('div')
        divEl.onmousedown = function () {// 当鼠标左键按下的时候，把开关的值设置为true
            isOpen = true
        }
        document.onmousemove = function (e) {
            e = e || window.event                //获取光标坐标
            var x = e.clientX - divEl.offsetWidth / 2   //x 坐标
            var y = e.clientY - divEl.offsetHeight / 2  //y 坐标
            if(x <= 0){  //设置左边界
                x = 0 
            }
            if(y <= 0){  //设置上边界
                y = 0
            }
            if(x > innerWidth - divEl.offsetWidth){ //设置右边界
                x = innerWidth - divEl.offsetWidth
            }
            if(y > innerHeight - divEl.offsetHeight){//设置下边界
                y = innerHeight - divEl.offsetHeight
            }
            if (isOpen) {              //判断如果isopen为真那就执行以下代码改变盒子
                divEl.style.top = y + 'px'
                divEl.style.left = x + 'px'
            }
           

        }
        divEl.onmouseup = function () {
            isOpen = false
        }