美文网首页
VUE 创建页面浮窗,拖拽事件与点击事件共存

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

作者: 大程子的技术成长路 | 来源:发表于2021-04-13 11:28 被阅读0次

    解决思路:

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

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

    //创建 div,并添加按下鼠标事件与抬起鼠标事件
    <div v-show="showCallCenter" class="call-center" @mousedown="move" @mouseup="moveEnd" ref="callCenter">
        <i class="el-icon-phone-outline"></i>
    </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("执行了拖拽事件")
          }
        },
    }
    

    相关文章

      网友评论

          本文标题:VUE 创建页面浮窗,拖拽事件与点击事件共存

          本文链接:https://www.haomeiwen.com/subject/weiqlltx.html