拖拽盒子2.0版本

点到盒子身上任意位置都可以拖动盒子，焦点不变

css代码

    * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            position: absolute;
            background: url(背景图路径) no-repeat;
            background-size: 100% 100%;
        }

body代码

    <div></div>

js代码

 var isOpen = false  //定义一个开关
        var divEl = document.querySelector('div')
        var l  //定义一个元素来装盒子的x坐标
        var t  //定义一个元素来装盒子的y坐标
        divEl.onmousedown = function (e) {// 当鼠标左键按下的时候，把开关的值设置为true
            isOpen = true
            e = e || window.event
            t = e.offsetY  //点击盒子里面获取的x 坐标
            l = e.offsetX  //点击盒子里面获取的y 坐标
        }
        document.onmousemove = function (e) {
            e = e || window.event                //获取光标坐标
            var x = e.clientX - l   //x 坐标
            var y = e.clientY - t  //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
        }