vue-draggability

A minimalist zero-dependency draggability library for Vue 3 composition API.

Installation

With Yarn:

yarn add vue-draggability

With NPM:

npm install vue-draggability

Usage

First, define your widget's template with refs like this:

<div id="teacup" ref="dragElement">
	<div id="teacup-handle" ref="dragHandle"></div>
</div>

Then, initialise the refs in your setup script and initialise draggability after the widget is mounted.

import { ref, onMounted } from "vue"
import { useDraggability } from "vue-draggability"

const dragElement = ref(null)
const dragHandle = ref(null)

onMounted(() => {
	useDraggability(dragElement, dragHandle)
})