实现可拖拽移动的悬浮按钮
不论在什么场景,最重要的是监听按钮的移动距离
以vue为例,如下:
<template>
<div>
<div v-show="isShow" class="back-btn" @click.stop="goback" ref="backDom">
</div>
</div>
</template>
在methods中定义如下方法,mounted中调用,
handlerDrag() {
let dom = this.$refs.backDom
//限制最大宽高,不让滑块出去
let maxW = document.body.clientWidth - dom.offsetWidth
let maxH = document.body.clientHeight - dom.offsetHeight
let oL, oT
//手指触摸开始,记录div的初始位置
dom.addEventListener('touchstart', function(e) {
let ev = e || window.event
let touch = ev.targetTouches[0]
oL = touch.clientX - dom.offsetLeft
oT = touch.clientY - dom.offsetTop
document.addEventListener('touchmove', defaultEvent, false)
})
//触摸中的,位置记录
dom.addEventListener('touchmove', function(e) {
let ev = e || window.event
let touch = ev.targetTouches[0]
let oLeft = touch.clientX - oL
let oTop = touch.clientY - oT
if(oLeft < 0) {
oLeft = 0
} else if(oLeft >= maxW) {
oLeft = maxW
}
if(oTop < 0) {
oTop = 0
} else if(oTop >= maxH) {
oTop = maxH
}
dom.style.left = oLeft + 'px'
dom.style.top = oTop + 'px'
}, { passive: false })
//触摸结束时的处理
dom.addEventListener('touchend', function() {
document.removeEventListener('touchmove', defaultEvent)
})
//阻止默认事件
function defaultEvent(e) {
e.preventDefault()
}
}
在应用中可能会出现的问题:
滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
解决办法1:
在touch的事件监听方法上绑定第三个参数{ passive: false },
通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。
解决办法2:
* { touch-action: pan-y; }
// 使用全局样式样式去掉