移动端拖拽

最近在做一个混合开发的项目，需求里面要求使用拖拽，然而这不是 jq 的拖拽；我向很多大佬求助过，有一位大佬建议我去使用 hammer.js;由于时间紧迫我不得不放弃这一方法。还有大佬向我推荐 vue 封装的插件，然而我试了一下有局限性，position:absolute==> 我想要是的 fixed；还有通过指令的方法等等我都试了不好用；求人不如求己下面我将为大家介绍一种简单的方法（适用于 vue）

完整代码展示

<template>
   <div class="detail">
       <!-- 头部 -->
       <app-header></app-header>
       <!-- 报障人信息 -->
       <app-person></app-person>
       <!-- 报障内容 -->
       <app-content></app-content>
       <!-- 处理进度 -->
       <app-progress></app-progress>
       <!-- 底部导航栏 -->
       <app-nav></app-nav>
       <!-- 遮罩层 -->
       <div class="home" id="moveDiv" @click="gohome" @touchstart="down" @touchmove="move"  @touchend="end">
         <img src="../../../../Img/img/home.png" alt="">
       </div>
   </div>
</template>

<script>
import AppHeader from "./vue/header.vue";
import AppPerson from "./vue/person.vue";
import AppContent from "./vue/content.vue";
import AppProgress from "./vue/progress.vue";
import AppNav from "./vue/nav.vue";
// import AppMask from './vue/mask.vue';

export default {
 data() {
   return {
     flags: false,
     position: {
       x: 0,
       y: 0
     },
     nx: '',
     ny: '',
     dx: '',
     dy: '',
     xPum: '',
     yPum: '',
   };
 },
 methods: {
   gohome:function(){
     //跳转home
     this.$router.push({
          name:'index',
         //  query:{engineerNum:this.engineerNum}
        })
   },
   down(){
     console.log('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;
   },
   preHandler:function(e){
     e.preventDefault();
   },
   move(){

     console.log('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;
       moveDiv.style.left = this.xPum+"px";
       moveDiv.style.top = this.yPum +"px";
       //阻止页面的滑动默认事件
       document.addEventListener("touchmove",this.preHandler,false);
     }
   },

   end(){

     console.log('end');
     //alert(e3);
       this.flags = false;
       document.removeEventListener('touchmove', this.preHandler, false);
   },
 },
 components: {
     AppHeader,
     AppPerson,
     AppContent,
     AppProgress,
     AppNav
     // AppMask
 }
};
</script>

<style scoped lang="less">
.detail {
 position: relative;
 min-height:100%;
}
.home{
 position:fixed;
 right:.2rem;
 bottom:15%;
 line-height:1rem;
 width:.98rem;
 height:.98rem;
 img{
   width:.98rem;
   height:.98rem;
 }
}
</style>
​

相关知识点

touchstart 当在屏幕上按下手指时触发
touchmove 当在屏幕上移动手指时触发

touchend 当在屏幕上抬起手指时触发
mousedown mousemove mouseup 对应的是 PC 端的事件

touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的 touch 操作，即触发 touchcancel。一般 会在 touchcancel 时暂停游戏、存档等操作。

效果图（非对应的界面由于环境问题）

步骤详解

HTML

    <div class="detail">
        <div class="home" id="moveDiv" @click="gohome" @touchstart="down" @touchmove="move"  @touchend="end">
            <img src="../../../../Img/img/home.png" alt="">
        </div>
    </div>
​

JS

    down(){
      console.log('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;
    },
    preHandler:function(e){
      e.preventDefault();
    },
    move(){

      console.log('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;
        moveDiv.style.left = this.xPum+"px";
        moveDiv.style.top = this.yPum +"px";
        //阻止页面的滑动默认事件
        document.addEventListener("touchmove",this.preHandler,false);
      }
    },

    end(){

      console.log('end');
      //alert(e3);
        this.flags = false;
        document.removeEventListener('touchmove', this.preHandler, false);
    },
​

CSS

.detail {
  position: relative;
  min-height:100%;
}
.home{
  position:fixed;
  right:.2rem;
  bottom:15%;
  line-height:1rem;
  width:.98rem;
  height:.98rem;
  img{
    width:.98rem;
    height:.98rem;
  }
​