useDraggable
Make elements draggable.
Package: @vueuse/core
Category: Elements
Usage
<script setup lang="ts">
import { useDraggable } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef('el')
// `style` will be a helper computed for `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">
Drag me! I am at {{ x }}, {{ y }}
</div>
</template>Options
| Option | Type | Default | Description |
|---|---|---|---|
| exact | MaybeRefOrGetter<boolean> |
false | Only start the dragging when click on the element directly |
| preventDefault | MaybeRefOrGetter<boolean> |
false | Prevent events defaults |
| stopPropagation | MaybeRefOrGetter<boolean> |
false | Prevent events propagation |
| capture | boolean |
true | Whether dispatch events in capturing phase |
| draggingElement | MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined> |
window | Element to attach pointermove and pointerup events to. |
| containerElement | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined> |
undefined | Element for calculating bounds (If not set, it will use the event's target). |
| handle | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined> |
target | Handle that triggers the drag event |
| pointerTypes | PointerType[] |
[ | Pointer types that listen to. |
Returns
| Name | Type |
|---|---|
| position | deepRef<Position> |
| isDragging | Ref |
| style | Ref |