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