可以拖拽的按钮 - davy-gan/web GitHub Wiki

 moveBtn () {
      // 移动按钮
      let flag = false
      let disX;
      let disY;
      let startTime
      let endTime
      const el = document.getElementById('guide-btn')
      el.onmousedown = (e) => {
        e.stopPropagation();
        e.preventDefault();
        //算出鼠标相对元素的位置
        flag = true
        disX = e.clientX - el.offsetLeft;
        disY = e.clientY - el.offsetTop;
        startTime = new Date().getTime();
      };
      el.onclick = (e) => {
        if (endTime - startTime <= 180) {
          this.changeGuideStatus()
        }
      };
      document.onmousemove = (e) => {
        if (flag) {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          this.popoverVisible = false
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          // 设置按钮移动的边界
          if (top < 68) {
            top = 68
          } else if (top > document.body.clientHeight - el.offsetHeight) {
            top = document.body.clientHeight - el.offsetHeight
          }
          if (left < 0) {
            left = 0
          } else if (left > document.body.clientWidth - el.offsetWidth) {
            left = document.body.clientWidth - el.offsetWidth
          }
          // 移动当前元素
          el.style.left = left + 'px';
          el.style.top = top + 'px';

        }
      };
      document.onmouseup = (e) => {
        endTime = new Date().getTime()
        flag = false
        return false
      };
    },