废话不多说,直接上代码:
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; }; }; }