可拖动的元素窗口

学JS的第15天，今天案例，案例虽小，知识具全，类似于电脑窗口一样可拖动的元素，在视口中移动，需要的拿走不谢。

//获取元素
        var box = document.querySelector('.box');
        //鼠标按下
        box.onmousedown = function (event) {
            //获取鼠标在目标元素上的位置
            var eLeft = event.offsetX;
            var eTop = event.offsetY;
            //鼠标移动
            document.onmousemove = function (event) {
                //获取鼠标在视口的位置
                var vLeft = event.clientX;
                var vTop = event.clientY;
                //计算元素的位置
                var deltaLeft = vLeft - eLeft;
                var deltaTop = vTop - eTop;

                //位置限定，防止元素拖出视口
                if (deltaLeft < 0) {
                    deltaLeft = 0;
                    //视口宽度 - 元素宽度
                } else if (deltaLeft > window.innerWidth - box.offsetWidth) {
                    deltaLeft = window.innerWidth - box.offsetWidth;
                }

                if (deltaTop < 0) {
                    deltaTop = 0;
                } else if (deltaTop > window.innerHeight - box.offsetHeight) {
                    deltaTop = window.innerHeight - box.offsetHeight;
                }
                //设置元素位置
                box.style.left = deltaLeft + 'px';
                box.style.top = deltaTop + 'px';
            }

        }
        //鼠标抬起
        box.onmouseup = function () {
            //解除 mousedown事件
            document.onmousemove = null;
        }

如图是主要的JS代码块，这个案例主要的问题在于如何获取鼠标的位置，并把鼠标位置设置给元素的位置，要改变元素的位置，所以元素一定要开启定位，什么定位都可以，其次就是事件，在鼠标按下时的事件触发要设置给要移动的元素，在这个事件里获取鼠标在这个元素当中的位置，利用offsetX，Y获取位置，然后还需要一个鼠标移动事件，在鼠标移动的时候需要获取鼠标在视口当中的位置，这里要用到clientX，Y去获取，因为元素在视口当中的位置是按左上角去计算的，所以元素的相对位置需要用鼠标在视口的位置减去鼠标在元素上的位置，还有一个点就是鼠标移动事件需要给document添加，如果给元素添加的话鼠标一旦移动速度过快移出元素之后这个事件就没办法触发了，最后一个就是在鼠标松开的时候解除鼠标移动事件，需要注意的是，为了防止元素在视口中丢失，所以需要给元素移动添加一个范围，最小为0，最大就是视口减去元素本身的宽高。

总的来说这个案例难度不大，而且有需要继续完善的地方，就是虽然元素不会移出视口，但是鼠标是可以移出视口的，如果鼠标在视口外松开，再回来就没办法解除移动事件，这个时候就会导致鼠标松开移动元素依然会跟着鼠标移动