最近在做一个混合开发的项目,需求里面要求使用拖拽,然而这不是 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;
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于