前端弹窗可拖拽功能实现

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

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

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