const moveDown = e = epreventDefault; 阻止默认的鼠标按下行为 estopPropagation; 阻止事件冒泡 鼠标按下计算当前元素距离可视区的距离 const disX = eclientX - dialogHeaderEloffsetLeft; const disY = eclientY
以下是修改后的代码,可以确保元素不会超出页面边界:
const moveDown = (e) => {
e.preventDefault(); // 阻止默认的鼠标按下行为
e.stopPropagation(); // 阻止事件冒泡
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL;
let styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes("%")) {
styL = +document.body.clientWidth * (+sty.left.replace(/%/g, "") / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/%/g, "") / 100);
} else {
styL = +sty.left.replace(/\px/g, "");
styT = +sty.top.replace(/\px/g, "");
}
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
// 获取页面可视区大小
const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 判断是否超出页面边界
if (l < 0) {
l = 0;
} else if (l + dragDom.offsetWidth > pageWidth) {
l = pageWidth - dragDom.offsetWidth;
}
if (t < 0) {
t = 0;
} else if (t + dragDom.offsetHeight > pageHeight) {
t = pageHeight - dragDom.offsetHeight;
}
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
dialogHeaderEl.onmousedown = moveDown;
// 双击头部全屏效果
dialogHeaderEl.ondblclick = (e) => {
if (isFullScreen) {
nowHight = dragDom.clientHeight;
nowWidth = dragDom.clientWidth;
nowMarginTop = dragDom.style.marginTop;
dragDom.style.height = "768px";
dragDom.style.width = "1024px";
dragDom.style.marginTop = "15vh";
isFullScreen = false;
dialogHeaderEl.style.cursor = "initial";
// dialogHeaderEl.onmousedown = null;
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
// 获取页面可视区大小
const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 判断是否超出页面边界
if (l < 0) {
l = 0;
} else if (l + dragDom.offsetWidth > pageWidth) {
l = pageWidth - dragDom.offsetWidth;
}
if (t < 0) {
t = 0;
} else if (t + dragDom.offsetHeight > pageHeight) {
t = pageHeight - dragDom.offsetHeight;
}
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
} else {
dragDom.style.removeProperty("width");
dragDom.style.removeProperty("height");
dragDom.style.removeProperty("margin-top");
isFullScreen = true;
dialogHeaderEl.style.cursor = "move";
dialogHeaderEl.onmousedown = moveDown;
}
};
这段代码在移动元素时,会判断元素是否超出页面边界,并做出相应的调整
原文地址: http://www.cveoy.top/t/topic/hyGu 著作权归作者所有。请勿转载和采集!