You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
ref="button"
|
|
class="draggable-button"
|
|
id="draggable-button"
|
|
@mousedown="dragButton"
|
|
@touchstart="dragButton"
|
|
>
|
|
<uni-icons @click="goHome" type="home" size="30" color="#fff"></uni-icons>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
|
|
const button = ref(null);
|
|
let startX, startY, posX, posY, mouseMoveTracker, mouseUpTracker;
|
|
|
|
const goHome = () => {
|
|
console.log(11);
|
|
uni.reLaunch({ url: "/pages/main/index/index" });
|
|
};
|
|
|
|
const dragButton = (event) => {
|
|
// event.preventDefault();
|
|
|
|
// 初始化坐标
|
|
startX = event.touches[0]?.clientX - button.value.offsetLeft;
|
|
startY = event.touches[0]?.clientY - button.value.offsetTop;
|
|
|
|
// 添加鼠标移动监听
|
|
mouseMoveTracker = (event) => {
|
|
document.body.style.overflow = "hidden";
|
|
posX = event.touches[0]?.clientX - startX;
|
|
posY = event.touches[0]?.clientY - startY;
|
|
if (posX < 0) {
|
|
posX = 0;
|
|
} else if (posX > document.body.clientWidth - button.value.clientWidth) {
|
|
posX = document.body.clientWidth - button.value.clientWidth;
|
|
}
|
|
if (posY < 0) {
|
|
posY = 0;
|
|
} else if (posY > document.body.clientHeight - button.value.clientHeight) {
|
|
posY = document.body.clientHeight - button.value.clientHeight;
|
|
}
|
|
button.value.style.top = `${posY}px`;
|
|
button.value.style.left = `${posX}px`;
|
|
};
|
|
document.addEventListener("touchmove", mouseMoveTracker);
|
|
|
|
// 添加鼠标释放监听
|
|
mouseUpTracker = () => {
|
|
document.body.style.overflow = "auto";
|
|
document.removeEventListener("touchmove", mouseMoveTracker);
|
|
document.removeEventListener("touchend", mouseUpTracker);
|
|
};
|
|
document.addEventListener("touchend", mouseUpTracker);
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (!button.value) {
|
|
var child = document.getElementById("draggable-button");
|
|
if (!document.body.contains(child)) {
|
|
document.body.appendChild(button.value);
|
|
}
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (button.value) {
|
|
var child = document.getElementById("draggable-button");
|
|
if (document.body.contains(child)) {
|
|
document.body.removeChild(child);
|
|
} else {
|
|
console.log("节点不是父节点的子节点");
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.draggable-button {
|
|
position: fixed;
|
|
cursor: pointer;
|
|
/* 其他样式 */
|
|
right: 20px;
|
|
top: 45%;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: #cdcdcd;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 900000;
|
|
}
|
|
</style>
|