<template>
<div class="container">
<div class="drag"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
></div>
</div>
</template>
<script>
export default {
name: 'game',
data() {
return {
gameObj: {
count: 0,
sY: 0,
sX: 0,
mY: 0,
mX: 0,
tagL: 0,
tagT: 0,
leftDis: 0,
topDis: 0,
},
showAnimation: false,
}
},
methods: {
touchstart(e) {
console.log(e, 'start')
this.gameObj.sY = e.touches[0].clientY
this.gameObj.sX = e.touches[0].clientX
let tag = e.target
this.gameObj.tagL = tag.offsetLeft
this.gameObj.tagT = tag.offsetTop
},
touchmove(e) {
e.preventDefault()
this.gameObj.mY = e.touches[0].clientY
this.gameObj.mX = e.touches[0].clientX
let tag = e.target
this.gameObj.leftDis = Number(this.gameObj.tagL + (this.gameObj.mX - this.gameObj.sX))
this.gameObj.topDis = Number(this.gameObj.tagT + (this.gameObj.mY - this.gameObj.sY))
tag.style.left = this.gameObj.leftDis + 'px'
tag.style.top = this.gameObj.topDis + 'px'
},
touchend(e) {
// console.log(e, 'end')
},
}
}
</script>
<style lang="less">
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
.drag {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
}
</style>