以下是修改后的代码,可以确保元素不会超出页面边界:

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;
  }
};

这段代码在移动元素时,会判断元素是否超出页面边界,并做出相应的调整

const moveDown = e = epreventDefault; 阻止默认的鼠标按下行为 estopPropagation; 阻止事件冒泡 鼠标按下计算当前元素距离可视区的距离 const disX = eclientX - dialogHeaderEloffsetLeft; const disY = eclientY

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

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