Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bcakmakoglu/revue-draggable

A Vue component that makes anything draggable 🤏 Easy to use and control. Supports Vue3 and Vue2 🦾
https://github.com/bcakmakoglu/revue-draggable

draggable javascript nuxt typescript vue vue2 vue3 vuejs

Last synced: 1 day ago
JSON representation

A Vue component that makes anything draggable 🤏 Easy to use and control. Supports Vue3 and Vue2 🦾

Awesome Lists containing this project

README 

        
[![Revue Draggable](./docs/static/revue-draggable.gif)](https://draggable.vueflow.dev)



![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-draggable)

[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-draggable.svg)](https://david-dm.org/bcakmakoglu/revue-draggable)

[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-draggable.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-draggable?type=dev)

![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/revue-draggable)

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/revue-draggable)

![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-draggable)



**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](https://www.npmjs.com/package/react-draggable#draggablecore).



Check the [Docs 📔](https://draggable-docs.vueflow.dev) for an in-depth explanation and

the [Demo 🪄](https://draggable.vueflow.dev) to see Revue Draggable in action.



## Table of Contents



* [🛠 Setup](#-setup)



    * [Registering Revue Draggable ](#-registering-revue-draggable)



* [🎮 Quickstart](#-quickstart)



* [🧪 Development](#-development)



* [🕵🏻‍♂️ Tests](#-tests)



* [💝 Sponsors](#-sponsors)



## 🛠 Setup



```bash

$ 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).

```bash

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



# or

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

```



### Using the components



#### Webpack (Vue2)



```js

// webpack.config.js



resolve: {

    alias: {

        vue: 'vue/dist/vue.js'

    }

}

```



#### [Nuxt](https://nuxtjs.org/)



```ts {}[nuxt.config.ts]

// nuxt.config.ts

export default {

    alias: {

        vue: 'vue/dist/vue.js'

    }

}

```



### 🔌 Registering Revue Draggable 



```ts {}[main.ts]

// 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');

```



```ts {}[main.ts]

// 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.



````vue {}[App.vue]

I use a directive to make myself draggable


````



Or use the component wrapper.

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

````vue {}[App.vue]



  
I use a wrapper



````



Check [the example file](./example/App.vue) for more in-detail examples like dropping elements, setting boundaries or syncing states.



## 🧪 Development



This project uses [Vite](https://vitejs.dev/) for development and [Rollup](https://rollupjs.org/) to create a distribution.



```bash

# 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](/cypress);

```bash

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

```