js拖拽封装

雨点打透心脏的1/2处 2021-09-19 15:02 426阅读 0赞

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

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;
                };
            };
        }