js 悬浮球拖拽

悬浮球拖动方法 ref:neko   onClickSusBall:悬浮球点击事件
export const ball = (neko, onClickSusBall) => {
  const nekoW = neko.offsetWidth;
  const nekoH = neko.offsetHeight;
  let cuntW = 0;
  let cuntH = 0;
  let time;
  if (sessionStorage.getItem('ballStation')) {
    neko.style.left = JSON.parse(sessionStorage.getItem('ballStation')).left;
    neko.style.top = JSON.parse(sessionStorage.getItem('ballStation')).top;
  } else {
    neko.style.left = `${parseInt(Math.random() * (document.body.offsetWidth - nekoW))}px`;
    neko.style.top = `${parseInt(Math.random() * (document.body.offsetHeight - nekoH))}px`;
    sessionStorage.setItem(
      'ballStation',
      JSON.stringify({left: neko.style.left, top: neko.style.top})
    );
  }
  function move(obj, w, h) {
    if (obj.direction === 'left') {
      obj.style.left = `${0 - w}px`;
    } else if (obj.direction === 'right') {
      obj.style.left = `${document.body.offsetWidth - nekoW + w}px`;
    }
    if (obj.direction === 'top') {
      obj.style.top = `${0 - h}px`;
    } else if (obj.direction === 'bottom') {
      obj.style.top = `${document.body.offsetHeight - nekoH + h}px`;
    }
  }

  function rate(obj, a) {
    obj.style.transform = ` rotate(${a})`;
  }

  neko.onmousedown = function(e) {
    time = new Date().getTime();
    const nekoL = e.clientX - neko.offsetLeft;
    const nekoT = e.clientY - neko.offsetTop;
    document.onmousemove = function(e) {
      cuntW = 0;
      cuntH = 0;
      neko.direction = '';
      neko.style.transition = '';
      neko.style.left = `${e.clientX - nekoL}px`;
      neko.style.top = `${e.clientY - nekoT}px`;
      if (e.clientX - nekoL < 5) {
        neko.direction = 'left';
      }
      if (e.clientY - nekoT < 5) {
        neko.direction = 'top';
      }
      if (e.clientX - nekoL > document.body.offsetWidth - nekoW - 5) {
        neko.direction = 'right';
      }
      if (e.clientY - nekoT > document.body.offsetHeight - nekoH - 5) {
        neko.direction = 'bottom';
      }
      move(neko, 0, 0);
    };
  };
  neko.onmouseover = function() {
    move(this, 0, 0);
    rate(this, 0);
  };

  neko.onmouseout = function() {
    move(this, nekoW / 2, nekoH / 2);
  };

  neko.onmouseup = function() {
    sessionStorage.setItem(
      'ballStation',
      JSON.stringify({left: neko.style.left, top: neko.style.top})
    );
    document.onmousemove = null;
    this.style.transition = '.5s';
    move(this, nekoW / 2, nekoH / 2);
    // 判断业务逻辑点击事件
    if (new Date().getTime() - time < 120) {
      onClickSusBall();
    }
  };

  window.onresize = function() {
    const bodyH = document.body.offsetHeight;
    const nekoT = neko.offsetTop;
    const bodyW = document.body.offsetWidth;
    const nekoL = neko.offsetLeft;

    if (nekoT + nekoH > bodyH) {
      neko.style.top = `${bodyH - nekoH}px`;
      cuntH++;
    }
    if (bodyH > nekoT && cuntH > 0) {
      neko.style.top = `${bodyH - nekoH}px`;
    }
    if (nekoL + nekoW > bodyW) {
      neko.style.left = `${bodyW - nekoW}px`;
      cuntW++;
    }
    if (bodyW > nekoL && cuntW > 0) {
      neko.style.left = `${bodyW - nekoW}px`;
    }

    move(neko, nekoW / 2, nekoH / 2);
  };
};