如何在script块中获取VueUse UseDraggable无渲染组件的位置？

要在script块中访问UseDraggable的position并实现拖拽出视口后的重置功能，你可以通过以下步骤实现：

1. 用v-model:position绑定位置到script的ref #

UseDraggable组件支持v-model:position双向绑定，直接将组件的位置同步到你定义的ref变量中，这样就能在script里直接访问和修改位置。

2. 监听拖拽结束事件，检查是否超出视口 #

利用组件的@end事件（拖拽结束时触发），在回调中判断元素是否超出视口范围，若超出则重置位置。

完整代码示例 #

<template>
  <UseDraggable
    v-slot="{ isDragging }"
    v-model:position="draggablePosition"
    class="fixed z-10 draggable-element w-40 h-40 bg-blue-500 text-white p-4"
    :initial-value="{ x: 0, y: 0 }"
    storage-key="vueuse-draggable"
    storage-type="session"
    @end="handleDragEnd"
  >
    <p>当前位置: {{ draggablePosition.x }}, {{ draggablePosition.y }}</p>
    <p v-if="isDragging">拖拽中...</p>
  </UseDraggable>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { UseDraggable } from '@vueuse/components'

// 绑定拖拽元素的位置
const draggablePosition = ref({ x: 0, y: 0 })
let draggableEl: HTMLElement | null = null

onMounted(() => {
  // 获取拖拽元素DOM，用于计算尺寸
  draggableEl = document.querySelector('.draggable-element')
})

function handleDragEnd() {
  if (!draggableEl) return

  // 获取视口和元素尺寸
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  const elWidth = draggableEl.offsetWidth
  const elHeight = draggableEl.offsetHeight

  // 判断是否超出视口
  const isOutOfViewport = 
    draggablePosition.value.x < 0 || 
    draggablePosition.value.x + elWidth > viewportWidth || 
    draggablePosition.value.y < 0 || 
    draggablePosition.value.y + elHeight > viewportHeight

  // 超出则重置到初始位置
  if (isOutOfViewport) {
    draggablePosition.value = { x: 0, y: 0 }
  }
}
</script>

关键说明 #

• v-model:position会自动同步组件的位置到draggablePosition，同时修改这个ref也会更新组件的位置，并且因为你配置了storage-key，位置变化会自动保存到sessionStorage。
• @end事件确保只在拖拽结束后检查位置，避免拖拽过程中频繁触发判断逻辑。
• 通过offsetWidth和offsetHeight获取元素实际尺寸，保证判断超出视口的准确性。

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