Skip to content

A Vue component that makes anything draggable ๐Ÿค Easy to use and control. Supports Vue3 and Vue2 ๐Ÿฆพ

License

Notifications You must be signed in to change notification settings

bcakmakoglu/revue-draggable

Repository files navigation

Revue Draggable

top-language dependencies Status devDependencies Status vulnerabilities GitHub code size in bytes GitHub last commit

Make your Vue components draggable. ๐Ÿค

Supports Vue 2 and Vue 3! Comes with a ๐Ÿ”‹ batteries included component / directive / composable or for users who want more control a simple abstraction over drag events with the core, wich is also available as a component / directive / composable.

Based on React Draggable.

Check the Docs ๐Ÿ“” for an in-depth explanation and the Demo ๐Ÿช„ to see Revue Draggable in action.

Table of Contents

๐Ÿ›  Setup

$ npm i --save @braks/revue-draggable

# or
$ yarn add @braks/revue-draggable

# or
$ pnpm add @braks/revue-draggable

For Vue2 add the composition-api to your dependencies (if you're using Vue < 2.7).

$ yarn add @braks/revue-draggable @vue/composition-api

# or
$ npm i --save @braks/revue-draggable @vue/composition-api

Using the components

Webpack (Vue2)

// webpack.config.js

resolve: {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}
// nuxt.config.ts
export default {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

๐Ÿ”Œ Registering Revue Draggable

// Vue3
import { createApp } from 'vue';
import Draggable, { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';

const app = createApp();

// Use as Plugin (registers directives and components)
app.use(DraggablePlugin);

// or
app.directive('draggable', DraggableDirective)
app.component('Draggable', Draggable);

app.mount('#root');
// Vue2 
import Vue from 'vue';
import { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';

// Use as Plugin
Vue.use(DraggablePlugin)

// or
Vue.directive('draggable', DraggableDirective)
Vue.component('Draggable', Draggable)

๐ŸŽฎ Quickstart

The easiest way to make your elements draggable is by using the DraggableDirective which will handle everything for you with no configuration necessary.

<div v-draggable="/* Pass DraggableProps as binding value here */" class="box">I use a directive to make myself draggable</div>

Or use the component wrapper. (In Vue2 make sure to include the full-build, runtime-build only works for Vue3.)

<Draggable>
  <div class="box">I use a wrapper</div>
</Draggable>

Check the example file for more in-detail examples like dropping elements, setting boundaries or syncing states.

๐Ÿงช Development

This project uses Vite for development and Rollup to create a distribution.

# start (dev)
$ pnpm dev

# build app
$ pnpm build

# serve app from build
$ pnpm serve

# build dist
$ pnpm build:dist

๐Ÿ› Debugging

Set the environment variable DRAGGABLE_DEBUG to enable logs on drag handlers.

๐Ÿ•ต๐Ÿปโ€โ™‚๏ธ Tests

Testing is done with Cypress. You can find the specs in the cypress directory;

$ pnpm ci # starts test server and runs tests, make sure port 3000 is open