//模板
<img :src="*" alt="" :class="{imgActive: !flags}"
 class="move"
 ref="home"
 @touchstart="down"
 @touchmove.prevent="move"
 @touchend="end"
 @click="goHome"/>
//数据初始化
data(){
  return{
    footerShow:false,
    flags: false,
    position: { x: 0, y: 0 },
    nx: '', 
    ny: '', 
    dx: '', 
    dy: '',
    xPum: '', 
    yPum: '',
   // transitionName: "slide-left" //初始过渡动画方向
  }
}
//方法
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.home.offsetLeft;
  this.dy = this.$refs.home.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;
    this.$refs.home.style.left = this.xPum+"px";
    this.$refs.home.style.top = this.yPum +"px";
  }
},
//鼠标释放时候的函数
end(){
  const { xPum, yPum } = this
  const availWidth = window.screen.availWidth
  const availHeight = window.screen.availHeight
  if (xPum <= 0 || xPum <= availWidth/2) {
    this.$refs.home.style.left = "10px";
  } else if (xPum >= availWidth - 44 || xPum > availWidth/2 ) {
    this.$refs.home.style.left = availWidth - 54 + "px";
  }
  if (yPum <= 0) {
    this.$refs.home.style.top = "10px";
  } else if (yPum >= availHeight - 44) {
    this.$refs.home.style.top = availHeight- 54 + "px";
  }
  this.flags = false;
}
//样式
.move {
   position: fixed;
   top: 10rem;
   left: 0.3rem;
   width: 1.173rem;
   height: 1.173rem;
   z-index: 9999;
 }
 .imgActive {
    transition: all .3s linear;
 }