Vue实现仿iPhone悬浮球的示例代码

let windowWidth = document.documentElement.clientWidth
let windowHeight = document.documentElement.clientHeight
// console.log("window.clientWidth", windowWidth)
// console.log(this.xPum)
// console.log(" moveDiv.clientWidth", moveDiv.clientWidth)

if (this.xPum > 0 && (this.xPum + moveDiv.clientWidth < windowWidth)) {
// movediv的左右边，未出界
moveDiv.style.left = this.xPum + "px";
} else if (this.xPum <= 0) {
// 左边出界，则左边缘贴边
moveDiv.style.left = 0 + "px";
} else if (this.xPum + moveDiv.clientWidth >= windowWidth) {
// 右边缘出界
moveDiv.style.left = (windowWidth - moveDiv.clientWidth) + "px";
// console.log("dx", windowWidth - moveDiv.clientWidth)
}
// 上下未出界
if (this.yPum > 0 && (this.yPum + moveDiv.clientHeight < windowHeight)) {
moveDiv.style.top = this.yPum +"px";
} else if (this.yPum <= 0) {
// 上边缘出界
moveDiv.style.top = 0 + "px"
} else if (this.yPum + moveDiv.clientHeight >= windowHeight) {
// 下边缘
// console.log("windowHeight:", windowHeight)
// console.log("moveDiv.clientHeight:", moveDiv.clientHeight)
// console.log(this.yPum + moveDiv.clientHeight)
moveDiv.style.top = windowHeight - moveDiv.clientHeight + "px"
}

// 阻止页面的滑动默认事件，为了只让悬浮球滑动，其他部分不滑动；如果碰到滑动问题，1.2 请注意是否获取到 touchmove, 系统默认passive: true，无法使用preventDefault
// document.addEventListener("touchmove", function(){
// event.preventDefault();
// }, { passive: false });
// document.addEventListener("mousemove", function(){
// event.preventDefault();
// }, { passive: false });
document.addEventListener("touchmove", this.preventDefault, { passive: false })
document.addEventListener("mousemove", this.preventDefault, { passive: false })
}
},
//鼠标释放时候的函数，鼠标释放，移除之前添加的侦听事件，将passive设置为true，不然背景会滑动不了
end(){
this.flags = false
// 注意事项，在添加和删除监听事件时，其function必须是同名的函数，不能为匿名函数。
document.removeEventListener('touchmove',this.preventDefault, false)
document.removeEventListener('mousemove',this.preventDefault, false)
// 下面两句是保证在移除监听事件后，除了悬浮球的部分还能够滑动，如果不添加，则无法滑动
document.addEventListener("touchmove", function(e) {