VUE 创建页面浮窗，拖拽事件与点击事件共存

解决思路：

• 记录鼠标按下时和鼠标抬起时对应的坐标（pageX 和 pageY）
• 通过开方将按下时位置与抬起时位置进行比对，当值等于0或者小于7时证明当前为点击事件，反之则是拖拽事件
• 对应的点击事件写在抬起鼠标函数的判断逻辑中即可

1.创建页面浮窗并在初始化时固定位置

//创建 div，并添加按下鼠标事件与抬起鼠标事件

    

// 将div设置为圆形浮窗样式
.call-center {
  color: #000;
  // 设置div大小
  width: 60px;
  height: 60px;
  // 设置div位置与变为圆形
  top: 8%;
  right: 2%;
  border-radius: 50%;
  // 设为浮动并置于最顶层
  position: fixed;
  z-index: 99999;
  text-align: center;
  background: #eeeeee;
  border: 3px solid rgb(216, 194, 194);
  i {
    display: block;
    font-size: 32px;
    margin-top: 16px;
    color: #606266;
    transition: color 0.15s linear;
  }
}

image.png

2.初始化坐标变量

data() {
    return {
      // 按下时的坐标
      startX: '',
      startY: '',
      // 抬起时的坐标
      endX: '',
      endY: '',
    }

3.添加鼠标按下方法

methods: {
   // 拖动窗口,鼠标按下
    move(event) {
      // 给对应div添加拖拽属性  
      let callCenter = this.$refs.callCenter
      callCenter.style.cursor = 'move'
      var distanceX = event.clientX - callCenter.offsetLeft
      var distanceY = event.clientY - callCenter.offsetTop
      // 获取按下时对应的坐标
      this.startX = event.pageX
      this.startY = event.pageY
      document.onmousemove = function (ev) {
        var oevent = ev || event
        // 加入判断，让浮窗在限定的页面内可拖动
        if (ev.clientX < 40 || ev.clientX > document.body.clientWidth - 30) {
          return
        }
        if (ev.clientY < 40 || ev.clientY > document.body.clientHeight - 30) {
          return
        }
        callCenter.style.left = oevent.clientX - distanceX + 'px'
        callCenter.style.top = oevent.clientY - distanceY + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
        callCenter.style.cursor = 'default'
      }
    }, 
}

4.添加鼠标抬起方法

methods: {
    // 鼠标抬起触发
    moveEnd(event) {
      // 获取鼠标抬起时的坐标 
      this.endX = event.pageX
      this.endY = event.pageY
      // 计算按下与抬起位置差值
      var d = Math.sqrt((this.startX - this.endX) * (this.startX - this.endX) + (this.startY - this.endY) * (this.startY - this.endY))
      if (d === 0 || d < 7) {
        console.log("执行了点击事件")
      }else {
          console.log("执行了拖拽事件")
      }
    },
}