移动端拖拽

本贴最后更新于 2115 天前,其中的信息可能已经事过景迁

最近在做一个混合开发的项目,需求里面要求使用拖拽,然而这不是 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 时暂停游戏、存档等操作。

效果图(非对应的界面由于环境问题)

alt 文本

步骤详解

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;
  }
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    264 引用 • 665 回帖 • 1 关注
  • 拖拽
    2 引用 • 1 回帖
  • 移动端
    6 引用 • 36 回帖

相关帖子

1 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • visus

    这个是你女神睡醒的时候吗