前端弹窗可拖拽功能实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端弹窗可拖拽功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端弹窗可拖拽功能主要实现思路就是监听鼠标移动事件，根据鼠标位置实时修改弹窗距离父级窗口（或者屏幕，根据需求设置）的left和right，但是考虑到鼠标拖拽一般都是在div的标题栏处发生，鼠标按下的位置不可能是弹窗的左上角位置，为此需要计算鼠标按下的位置距离弹窗左上角的距离，这样才可以保存后续鼠标移动位置可以加上这个距离从而保证与弹窗左上角的位置保持一致性。

还需要注意的地方在于style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，用offsetLeft比较方便。但是offsetLeft是只读的，为此修改弹窗位置都是修改style.left和style.top，还有一个就是style.left的值需要事先定义在html里，否则style.left取不到值。文章来源地址https://www.toymoban.com/news/detail-826408.html

// titleID, boxID分别为div的header.id和div.id
export function dropWindow(titleID, boxID) {
  let title = document.getElementById(titleID);
  let boxContent = document.getElementById(boxID);
  if (!title || !boxContent) return;
  let x = 0;
  let y = 0;
  title.onmousedown = function (ev) {
    let oEvent = ev;
    //x、y分别代表，鼠标点击处与div左上角之间的横坐标和纵坐标之差
    x = oEvent.clientX - boxContent.offsetLeft;
    y = oEvent.clientY - boxContent.offsetTop;
    document.onmousemove = function (ev) {
      let oEvent = ev;
      //   加上这句代码可以保证拖拽过程中文本不被选中
      oEvent.preventDefault();
      //m、n分别代表div左上角的横、纵坐标
      let left = oEvent.clientX - x;
      let top = oEvent.clientY - y;
      //   控制div超出屏幕外的位置
      //  如果div左上角超出屏幕左上角则div左上角固定在0,0屏幕坐标上
      top = top < 0 ? 0 : top;
      left = left < 0 ? 0 : left;
      //  如果div右下角超出屏幕右下角则div右下角固定在(div.width,div.height)屏幕坐标上
      left =
        left + boxContent.offsetWidth > window.innerWidth
          ? window.innerWidth - boxContent.offsetWidth
          : left;
      top =
        top + boxContent.offsetHeight > window.innerHeight
          ? window.innerHeight - boxContent.offsetHeight
          : top;
      //设置div左上角的坐标
      boxContent.style.left = left + "px";
      boxContent.style.top = top + "px";
    };
    document.onmouseup = function (ev) {
      //释放move事件，如果不释放，放开鼠标后，div仍然会跟随鼠标移动
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
}

到了这里，关于前端弹窗可拖拽功能实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！