joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

拖拽超出时限制位置

Browse Source
This commit is contained in:
dong 2022-07-08 16:34:02 +08:00
parent d19e8eb3d9
commit 04a22ee760
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/directive/dialogDrag/dialogDrag.js
View File

@ -10,10 +10,12 @@ export default {
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dialogHeaderEl.onmousedown = (e) => {
e.stopPropagation();
e.stopPropagation();
/** 鼠标按下，计算当前元素距离可视区的距离*/
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
const oY = e.offsetY;
const bY = dialogHeaderEl.offsetHeight - e.offsetY;
/** 获取到的值带px 正则匹配替换*/
let styL, styT;
@ -31,10 +33,17 @@ export default {
}
document.onmousemove = function (e) {
e.stopPropagation();
e.stopPropagation();
let cY = e.clientY;
if (cY < oY) {
cY = oY;
}
if (cY > document.body.clientHeight - bY) {
cY = document.body.clientHeight - bY;
}
/** 通过事件委托，计算移动的距离*/
const l = e.clientX - disX;
const t = e.clientY - disY;
const t = cY - disY;
/** 移动当前元素*/
dragDom.style.left = `${l + styL}px`;
@ -48,7 +57,7 @@ export default {
};
document.onmouseup = function () {
e.stopPropagation();
e.stopPropagation();
document.onmousemove = null;
document.onmouseup = null;
};