可以尝试修改双击头部全屏效果的代码,将全屏和非全屏时的拖拽效果分别处理。在全屏状态下,拖拽时只能在弹框内部进行,不会拖拽出上下左右的页面。具体实现可以参考以下代码:

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})
    };
  }
};
Vue 弹框拖拽功能优化:限制全屏状态下的拖拽范围

原文地址: https://www.cveoy.top/t/topic/oKOf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录