vue 拖拽移動（相似於iPhone虛擬home ）

vue 移動端拖拽移動 
        效果演示
複製代碼

下面的代碼只能拖拽移動效果

vue 拖拽移動
     <div 
    style="
      touch-action: none;
      webkit-overflow-scrolling: touch;
      position: fixed; bottom: 120px;right: 12px;
      z-index: 99999999;
      border-radius: 50%;
      background:rgba(0,0,0,0.3);
      width:50px;
      height:50px;
      line-height:50px;
      text-align:center;
      font-size:15px;
      color:#fff;
      "
      class="hidden-sm-and-up" id="moveDiv"
      @mousedown="down" @touchstart="down"
      @mousemove="move" @touchmove.prevent.stop="move"   
      @mouseup="end" @touchend="end"
      @click="tabswith"
      >home
      </div>
      
      
      data(){
          return ｛
          flags: false,
          position: { x: 0, y: 0 },
          nx: '', 
          ny: '',
          dx: '',
          dy: '',
          xPum: '',
          yPum: '',
          ｝
      }
      
      
      methods: {
tabswith(){
  this.isswitcha =!this.isswitcha
},
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 = moveDiv.offsetLeft;
        this.dy = moveDiv.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;
  if (this.xPum <= 0) {
        this.xPum = 0;
  } else if (this.xPum >= document.documentElement.clientWidth - moveDiv.offsetWidth){
        this.xPum = document.documentElement.clientWidth - moveDiv.offsetWidth;
  }
if (this.yPum <= 0) {
       this.yPum = 0;
        } else if (this.yPum >= document.documentElement.clientHeight - moveDiv.offsetHeight){
                this.yPum = document.documentElement.clientHeight - moveDiv.offsetHeight
        }
        moveDiv.style.left = this.xPum+"px";
        moveDiv.style.top = this.yPum +"px";
        window.addEventListener('touchmove', () => event.preventDefault(),{ passive: false })
        }
      },
      end(){
        this.flags = false;
      },
                },
複製代碼

還有幾個小時雙十一到了 買買買!