vue实现可拖拽移动按钮

效果演示

1、

<template>
<!-- 评论按钮 -->
<div class="comment" 
  @click="commentRepost"
  @mousedown="down"
  @touchstart="down"
  @mousemove="move"
  @touchmove="move"
  @mouseup="end"
  @touchend="end"
  ref="fu"
>评论</div>
</template>

<style lang="less" scoped>
.comment {
  position: fixed;
  top: 50%;
  right: 33px;
  width: 125px;
  height: 125px;
  // background: rgba(54, 154, 252, 0.39);
  background-color: #369afc;
  border-radius: 50%;
  font-size: 39px;
  line-height: 125px;
  text-align: center;
  color: #ffffff;
}
</style>

2、

<script>
data() {
  return {
    isLoading: false,
    flags: false, //控制使用
    position: {
      x: 0,
      y: 0,
    },
    nx: "",
    ny: "",
    dx: "",
    dy: "",
    xPum: "",
    yPum: "",
  };
},

methods: {

  down() {
    this.flags = true;
    var touch;
    if (event.touches) {
      touch = event.touches[0];
    } else {
      touch = event;
    }
    this.position.x = touch.clientX;
    this.position.y = touch.clientY;
    this.dx = this.$refs.fu.offsetLeft;
    this.dy = this.$refs.fu.offsetTop;
  },
  move() {
    if (this.flags) {
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.nx = touch.clientX - this.position.x;
      this.ny = touch.clientY - this.position.y;
      this.xPum = this.dx + this.nx;
      this.yPum = this.dy + this.ny;
      let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
      let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度
      this.xPum < 0 && (this.xPum = 0);
      this.yPum < 0 && (this.yPum = 0);
      this.xPum > width && (this.xPum = width);
      this.yPum > height && (this.yPum = height);
      // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
      this.$refs.fu.style.left = this.xPum + "px";
      this.$refs.fu.style.top = this.yPum + "px";
      // }
      //阻止页面的滑动默认事件
      document.addEventListener(
        "touchmove",
        function () {
          event.preventDefault();
        },
        false
      );
    }
  },
  //鼠标释放时候的函数
  end() {
    this.flags = false;
  },

}