废话不多说,直接上代码
<template>
<div
class="discussIcon"
ref="discussIcon"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
></div>
</template>
<script>
var dx, dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height
export default {
name: 'dragDrop',
data () {
return {
flags: false,
touchStartFlag: false,
position: {
lastx: 0,
lasty: 0,
x: 0,
y: 0
},
};
},
methods: {
touchStart (event) {
this.flags = true
this.touchStartFlag = true
var touch
if (event.touches) {
touch = event.touches[0]
} else {
touch = event
}
// console.log('鼠标点所在位置', touch.clientX,touch.clientY)
// console.log('div左上角位置', event.target.offsetTop,event.target.offsetLeft)
dx = touch.clientX - event.target.offsetLeft
dy = touch.clientY - event.target.offsetTop
},
touchMove () {
if (this.flags) {
var touch
if (event.touches) {
touch = event.touches[0]
} else {
touch = event
}
// 定位滑块的位置
this.position.x = touch.clientX - dx
this.position.y = touch.clientY - dy
// 为了区分click事件
if (this.touchStartFlag) {
this.position.lastx = this.position.x
this.position.lasty = this.position.y
this.touchStartFlag = false
}
// console.log('position', this.position.x, this.position.y )
// console.log('positionlast', this.position.lastx, this.position.lasty )
// 临界处理,防止拖出页面
if (this.position.x < 0) {
this.position.x = 0
} else if (this.position.x > screenWidth - touch.target.clientWidth) {
this.position.x = screenWidth - touch.target.clientWidth
}
if (this.position.y < 0) {
this.position.y = 0
} else if (this.position.y > screenHeight - touch.target.clientHeight) {
this.position.y = screenHeight - touch.target.clientHeight
}
this.$refs.discussIcon.style.left = this.position.x + 'px'
this.$refs.discussIcon.style.top = this.position.y + 'px'
//阻止页面的滑动默认事件
document.addEventListener("touchmove", function () {
event.stopPropagation()
}, false)
}
},
//鼠标释放时候的函数
touchEnd () {
this.flags = false
// 移动距离过短 视为点击事件
if (Math.abs(this.position.x - this.position.lastx) < 3 && Math.abs(this.position.y - this.position.lasty) < 3) {
this.$emit('dragClick')
}
this.position.lastx = this.position.x
this.position.lasty = this.position.y
},
}
}
</script>
<style lang="stylus" scoped>
.discussIcon {
height: 100px
width: 100px
background-image: url('图片地址')
background-size: 100% 100%
border-radius: 50%
position: absolute
bottom: 170px
right: 28px
z-index: 999999
}
</style>