js拖拽封装

废话不多说，直接上代码：

drag: function (id) {
        let isDown = false;
        let idObj = document.getElementById(id);
        let _this; // 缓存this
        let x, y, l, t;
        idObj.onmousedown = function (event) {
            var evt = event || window.event;
            _this = this;
            //获取x坐标和y坐标
            x = evt.clientX;
            y = evt.clientY;
            //获取左部和顶部的偏移量
            l = _this.offsetLeft;
            t = _this.offsetTop;
            isDown = true;
        };
        document.body.onmouseup = function() {
            isDown = false;
        };
        document.body.onmousemove = function(event) {
            var evt = event || window.event;
            //if(鼠标处于按下状态){
            if (isDown) {
                //让盒子跟着鼠标移动
                //获取x坐标和y坐标
                var nx = evt.clientX;
                var ny = evt.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                var nl = nx - (x - l);
                var nt = ny - (y - t);
                // 判断左右边界
                if (nl < 0) {
                    nl = 0
                } else if (nl > (window.innerWidth - _this.offsetWidth)) {
                    nl = window.innerWidth - _this.offsetWidth;
                }else {
                    nl = nx - (x - l);
                };

                // 判断上下边界
                if(nt < 0) {
                    nt = 0;
                }else if (nt > (window.innerHeight - _this.offsetHeight)) {
                    nt = window.innerHeight - _this.offsetHeight;
                } else {
                    nt = ny - (y - t);
                }

                var evt = event || window.event;
                _this.style.position = 'absolute';
                _this.style.left = nl + "px";
                _this.style.top = nt + "px";
                _this.style.margin = 0;
            };
        };
    }