Vue 弹框拖拽功能优化:限制全屏状态下的拖拽范围
可以尝试修改双击头部全屏效果的代码,将全屏和非全屏时的拖拽效果分别处理。在全屏状态下,拖拽时只能在弹框内部进行,不会拖拽出上下左右的页面。具体实现可以参考以下代码:
dialogHeaderEl.ondblclick = (e) => {
if (isFullScreen) {
// 进入全屏状态
// ...
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离
const l = e.clientX - disX;
const t = e.clientY - disY;
const maxLeft = document.body.clientWidth - dragDom.offsetWidth;
const maxTop = document.body.clientHeight - dragDom.offsetHeight;
// 限制拖拽范围在弹框内部
let left = l + styL;
let top = t + styT;
left = Math.min(Math.max(left, 0), maxLeft);
top = Math.min(Math.max(top, 0), maxTop);
// 移动当前元素
dragDom.style.left = `${left}px`;
dragDom.style.top = `${top}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
} else {
// 退出全屏状态
// ...
dialogHeaderEl.onmousedown = moveDown;
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离
const l = e.clientX - disX;
const t = e.clientY - disY;
const maxLeft = document.body.clientWidth - dragDom.offsetWidth;
const maxTop = document.body.clientHeight - dragDom.offsetHeight;
// 限制拖拽范围在弹框内部
let left = l + styL;
let top = t + styT;
left = Math.min(Math.max(left, 0), maxLeft);
top = Math.min(Math.max(top, 0), maxTop);
// 移动当前元素
dragDom.style.left = `${left}px`;
dragDom.style.top = `${top}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
}
};
原文地址: https://www.cveoy.top/t/topic/oKOf 著作权归作者所有。请勿转载和采集!