vue自定义指令之面板拖拽的实现

2020-06-13 10:33:59易采站长站整理

let top = e.clientY - disY;
// 绑定的值不能滑出基于盒子的范围
left < 0 && (left = 0);
left > (maxWidth - elWidth - mgl) && (left = maxWidth - elWidth - mgl);
top < 0 && (top = 0);
top > (maxHeight - elHeight - mgt) && (top = maxHeight - elHeight - mgt);
//绑定元素位置到positionX和positionY上面
positionX = top;
positionY = left;

//移动当前元素
_el.style.left = left + "px";
_el.style.top = top + "px";
};
// 这里是鼠标超出基于盒子范围之后再松开,会监听不到
document.onmouseup = e => {
masterNode.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}