如何在VueJS中实现类似iPhone虚拟Home键的可拖动按钮？

嘿，这个需求我刚好折腾过！想要在Vue里做出类似iPhone虚拟Home键那种可拖动、松手后自动吸附边缘的悬浮按钮，其实有两种省心的方案：自己手写核心逻辑（轻量灵活），或者用现成的Vue生态库（快速落地）。

方案一：自己手写实现（无依赖） #

如果不想引入额外库，几行代码就能搞定核心逻辑，还能完全自定义样式。下面是Vue 3的组件示例：

<template>
  <div
    class="home-button"
    :style="{ left: `${position.x}px`, top: `${position.y}px` }"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <!-- 这里可以放图标或者文字，比如一个圆点 -->
    <div class="button-inner"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const position = ref({ x: 20, y: 100 })
let isDragging = false
let startX = 0
let startY = 0
let initialX = 0
let initialY = 0
let windowWidth = 0
let windowHeight = 0
const buttonSize = 60 // 按钮宽高

const getWindowSize = () => {
  windowWidth = window.innerWidth
  windowHeight = window.innerHeight
}

const startDrag = (e) => {
  isDragging = true
  // 兼容触摸和鼠标事件
  const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX
  const clientY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY
  
  startX = clientX
  startY = clientY
  initialX = position.value.x
  initialY = position.value.y

  document.addEventListener('mousemove', onDrag)
  document.addEventListener('touchmove', onDrag, { passive: false })
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('touchend', stopDrag)
}

const onDrag = (e) => {
  if (!isDragging) return
  const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX
  const clientY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY
  
  const dx = clientX - startX
  const dy = clientY - startY
  
  // 限制按钮不超出屏幕
  position.value.x = Math.max(0, Math.min(initialX + dx, windowWidth - buttonSize))
  position.value.y = Math.max(0, Math.min(initialY + dy, windowHeight - buttonSize))
}

const stopDrag = () => {
  isDragging = false
  // 松手后自动吸附左右边缘
  const centerX = position.value.x + buttonSize / 2
  if (centerX < windowWidth / 2) {
    position.value.x = 10 // 左边缘间距
  } else {
    position.value.x = windowWidth - buttonSize - 10 // 右边缘间距
  }
  
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('touchmove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  document.removeEventListener('touchend', stopDrag)
}

onMounted(() => {
  getWindowSize()
  window.addEventListener('resize', getWindowSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', getWindowSize)
})
</script>

<style scoped>
.home-button {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease, top 0.3s ease;
  z-index: 9999;
}

.home-button:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.9);
}

.button-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>

这个组件实现了核心功能：

• 支持鼠标和触摸拖拽
• 拖拽时限制不超出屏幕
• 松手后自动吸附左右边缘
• 样式完全模仿iPhone虚拟Home键的半透明、阴影效果

方案二：用VueUse手势库快速实现 #

如果想更省心，推荐用@vueuse/gesture——这是Vue生态里非常好用的手势处理库，能帮你省去手写拖拽事件的麻烦。

首先安装依赖：

npm install @vueuse/gesture

然后组件示例：

<template>
  <div
    class="home-button"
    :style="{ left: `${x}px`, top: `${y}px` }"
    v-drag="handleDrag"
  >
    <div class="button-inner"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDrag } from '@vueuse/gesture'

const x = ref(20)
const y = ref(100)
const buttonSize = 60
let windowWidth = 0

const { vDrag } = useDrag(({ movement, dragging, last }) => {
  if (dragging) {
    // 计算拖拽后的位置，限制不超出屏幕
    x.value = Math.max(0, Math.min(x.value + movement[0], windowWidth - buttonSize))
    y.value = Math.max(0, Math.min(y.value + movement[1], window.innerHeight - buttonSize))
  } else if (last) {
    // 松手后吸附边缘
    const centerX = x.value + buttonSize / 2
    x.value = centerX < windowWidth / 2 ? 10 : windowWidth - buttonSize - 10
  }
})

onMounted(() => {
  windowWidth = window.innerWidth
  window.addEventListener('resize', () => {
    windowWidth = window.innerWidth
  })
})
</script>

<style scoped>
/* 样式和方案一完全一样，直接复用即可 */
.home-button {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease, top 0.3s ease;
  z-index: 9999;
}

.home-button:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.9);
}

.button-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>

这个方案用VueUse封装好的拖拽逻辑，代码更简洁，而且还支持更多手势扩展（比如缩放、旋转），适合需要后续扩展功能的场景。

额外提示 #

• 如果是Vue 2项目，只需要把<script setup>改成Vue 2的选项式API写法即可，逻辑完全通用。
• 可以根据需求调整按钮的大小、颜色、阴影效果，完全自定义样式。
• 如果需要点击按钮触发功能，直接在按钮上添加@click事件就行，不影响拖拽逻辑。

内容的提问来源于stack exchange，提问作者KitKit