diff --git a/h5/pages/components/goHome.vue b/h5/pages/components/goHome.vue index 768fba4..1dd54ed 100644 --- a/h5/pages/components/goHome.vue +++ b/h5/pages/components/goHome.vue @@ -30,9 +30,19 @@ const dragButton = (event) => { // 添加鼠标移动监听 mouseMoveTracker = (event) => { + document.body.style.overflow = "hidden"; posX = event.touches[0]?.clientX - startX; posY = event.touches[0]?.clientY - startY; - button.value.style.position = "absolute"; + 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`; }; @@ -40,6 +50,7 @@ const dragButton = (event) => { // 添加鼠标释放监听 mouseUpTracker = () => { + document.body.style.overflow = "auto"; document.removeEventListener("touchmove", mouseMoveTracker); document.removeEventListener("touchend", mouseUpTracker); }; @@ -48,13 +59,21 @@ const dragButton = (event) => { onMounted(() => { if (!button.value) { - document.body.appendChild(button.value); + var child = document.getElementById("draggable-button"); + if (!document.body.contains(child)) { + document.body.appendChild(button.value); + } } }); onBeforeUnmount(() => { if (button.value) { - document.body.removeChild(button.value); + var child = document.getElementById("draggable-button"); + if (document.body.contains(child)) { + document.body.removeChild(child); + } else { + console.log("节点不是父节点的子节点"); + } } });