useDraggable

要素をドラッグ可能にします。

使用法

<script setup lang="ts">
import { useDraggable } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef<HTMLElement>('el')

// `style` は `left: ?px; top: ?px;` のためのヘルパー計算プロパティになります
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})
</script>

<template>
  <div ref="el" :style="style" style="position: fixed">
    ドラッグしてください！私は {{ x }}, {{ y }} にいます
  </div>
</template>

ブラウザ内の特定の要素のデフォルトのドラッグアンドドロップ動作を上書きするには、preventDefault: true を設定します。

import { useDraggable } from '@vueuse/core'
// ---cut---
const { x, y, style } = useDraggable(el, {
  preventDefault: true,
  // `preventDefault: true` を使用すると
  // ネイティブの動作（例: img）を無効にし、
  // ドラッグアンドドロップを制御し、ブラウザの干渉を防ぐことができます。
})

コンポーネントの使用法

<template>
  <UseDraggable v-slot="{ x, y }" :initial-value="{ x: 10, y: 10 }">
    ドラッグしてください！私は {{ x }}, {{ y }} にいます
  </UseDraggable>
</template>

コンポーネントの使用法では、追加のプロップ storageKey と storageType をコンポーネントに渡すことができ、要素の位置の永続性を有効にします。

<template>
  <UseDraggable storage-key="vueuse-draggable" storage-type="session">
    ページをリフレッシュしても、私は同じ位置にいます！
  </UseDraggable>
</template>