右键移动盒子且可拖拽

export function move(obj) {
  obj.oncontextmenu = function (e) {
    e.preventDefault();
  };
  var direction = 0;
  var leftRange;
  var rightRange;
  obj.onmousemove = (e) => {
    var mouseOverX = e.clientX;
    var BoxLeft = obj.offsetLeft;
    var BoxWidth = obj.offsetWidth;
    leftRange = mouseOverX - BoxLeft > -30 && mouseOverX - BoxLeft < 30;
    rightRange =
      mouseOverX - (BoxLeft + BoxWidth) > -30 &&
      mouseOverX - (BoxLeft + BoxWidth) < 30;

    if (leftRange || rightRange) {
      obj.style.cursor = "e-resize";
    } else {
      obj.style.cursor = "default";
    }
  };

  obj.onmousedown = function (ev) {
    ev.stopPropagation();
    let keySide = ev.button;
    if (keySide == 0) return;
    var ev = window.even || ev;
    // ev.clientX:可视窗口 鼠标到body的距离，box.offsetLeft：box的边框到body的距离
    var x = ev.clientX - obj.offsetLeft; //box到鼠标点击位置的水平距离
    var y = ev.clientY - obj.offsetTop;

    var mouseDownX = ev.clientX; //获取鼠标按下时距离浏览器左侧的距离
    var clickBoxLeft = obj.offsetLeft; //获取当前元素距离左侧的距离
    var clickBoxWeight = obj.offsetWidth; //获取当前元素的宽度

    if (mouseDownX < clickBoxLeft + 30) {
      direction = "left";
    } else if (mouseDownX > clickBoxLeft + clickBoxWeight - 30) {
      direction = "right";
    } else {
      direction = 0;
    }

    document.onmousemove = function (ev) {
      var ev = window.even || ev;
      var minleft = ev.clientX - x;
      var mintop = ev.clientY - y;
      if (minleft < 0) {
        // 左边边界
        minleft = 0;
      }
      if (minleft > document.documentElement.clientWidth - obj.offsetWidth) {
        // 右边边界
        minleft = document.documentElement.clientWidth - obj.offsetWidth;
      }
      if (mintop < 0) {
        // 上边界
        mintop = 0;
      }
      if (mintop > document.documentElement.clientHeight - obj.offsetHeight) {
        // 下边界
        mintop = document.documentElement.clientHeight - obj.offsetHeight;
      }
      if (keySide == 2 && direction == 0) {
        obj.style.left = minleft + "px";
        obj.style.top = mintop + "px";
      } else if (keySide == 2 && direction != 0) {
        var xx = ev.clientX;
        if (direction === "left") {
          obj.style.width = clickBoxWeight + mouseDownX - xx + "px";
          if (obj.offsetWidth <= 220) return;
          obj.style.left = xx + "px";
        } else if (direction === "right" && obj.offsetWidth >= 220) {
          obj.style.width = clickBoxWeight + xx - mouseDownX + "px";
        }
      }
    };
    document.onmouseup = function (e) {
      direction = 0;
      console.log("注销事件");
      // 停止移动事件
      document.onmousemove = null;
      document.onmouseup = null;
      e.preventDefault();
    };
    return false;
  };
}