@neodrag/vue

One draggable to rule em all

A lightweight Vue directive to make your elements draggable.

Getting Started

Features

• 🤏 Tiny - Only 1.77KB min+brotli.
• 🐇 Simple - Quite simple to use, and effectively no-config required!
• 🧙‍♀️ Elegant - Vue directive, to keep the usage simple, elegant and straightforward.
• 🗃️ Highly customizable - Offers tons of options that you can modify to get different behavior.
• ⚛️ Reactive - Change options passed to it on the fly, it will just work 🙂

Try it in Stackblitz

Installing

pnpm add @neodrag/vue

# npm
npm install @neodrag/vue

# yarn
yarn add @neodrag/vue

Usage

Basic usage

<script setup>
import { vDraggable } from '@neodrag/vue';
</script>

<template>
	<div v-draggable>I am draggable</div>
</template>

With options

<script setup>
import { vDraggable } from '@neodrag/vue';
</script>

<template>
	<div v-draggable="{ axis: 'x', grid: [10, 10] }">I am draggable</div>
</template>

Defining options elsewhere with typescript

<script setup lang="ts">
import { vDraggable, type DragOptions } from '@neodrag/vue';

const options: DragOptions = {
	axis: 'y',
	bounds: 'parent',
};
</script>

<template>
	<div v-draggable="options">I am draggable</div>
</template>

Read the docs

Credits

Inspired from the amazing react-draggable library, and implements a similar API, but 3x smaller.

License

MIT License © Puru Vijay