Make Components Draggable With Revue Draggable

Revue Draggable is a library for Vue that enables draggable functionality on any Vue 3 or Vue 2 components.

How to use it:

1. Import and register the Revue Draggable.

// Vue 3
import { createApp } from 'vue';
import Draggable, { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';
const app = createApp();
// As Plugin
app.use(DraggablePlugin);
// or
app.directive('draggable', DraggableDirective)
app.component('Draggable', Draggable);
app.mount('#root');

// Vue 2
import Vue from 'vue';
import { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';
// As Plugin
Vue.use(DraggablePlugin)
// or
Vue.directive('draggable', DraggableDirective)
Vue.component('Draggable', Draggable)

2. Use the Revue Draggable as a directive or a component.

<template>
  <div v-draggable="props" class="box">
    ...
  </div>
</template>

<template>
  <Draggable>
    <div class="box">
      ...
    </div>
  </Draggable>
</template>

3. Available props.

axis: {
  type: String as PropType<DraggableOptions['axis']>,
  default: 'both'
},
bounds: {
  type: [Object, String, Boolean] as PropType<DraggableOptions['bounds']>,
  default: false
},
defaultClassName: {
  type: String as PropType<DraggableOptions['defaultClassName']>,
  default: 'revue-draggable'
},
defaultClassNameDragging: {
  type: String as PropType<DraggableOptions['defaultClassNameDragging']>,
  default: 'revue-draggable-dragging'
},
defaultClassNameDragged: {
  type: String as PropType<DraggableOptions['defaultClassNameDragged']>,
  default: 'revue-draggable-dragged'
},
defaultPosition: {
  type: Object as PropType<DraggableOptions['defaultPosition']>,
  default: () => ({ x: 0, y: 0 })
},
scale: {
  type: Number as PropType<DraggableOptions['scale']>,
  default: 1
},
position: {
  type: Object as PropType<DraggableOptions['position']>,
  default: undefined
},
positionOffset: {
  type: Object as PropType<DraggableOptions['positionOffset']>,
  default: undefined
},
allowAnyClick: {
  type: Boolean as PropType<DraggableOptions['allowAnyClick']>,
  default: true
},
disabled: {
  type: Boolean as PropType<DraggableOptions['disabled']>,
  default: false
},
enableUserSelectHack: {
  type: Boolean as PropType<DraggableOptions['enableUserSelectHack']>,
  default: true
},
cancel: {
  type: String as PropType<DraggableOptions['cancel']>,
  default: undefined
},
offsetParent: {
  type: Object as PropType<DraggableOptions['offsetParent']>,
  default: () => {}
},
grid: {
  type: Array as unknown as PropType<DraggableOptions['grid']>,
  default: undefined
},
handle: {
  type: String as PropType<DraggableOptions['handle']>,
  default: undefined
},
start: {
  type: Function as PropType<DraggableOptions['start']>,
  default: () => {}
},
move: {
  type: Function as PropType<DraggableOptions['move']>,
  default: () => {}
},
stop: {
  type: Function as PropType<DraggableOptions['stop']>,
  default: () => {}
}

4. Events.

• @mouseenter
• @mouseleave
• @start
• @stop
• @move

Preview:

Changelog:

v0.4.2 (02/06/2022)

• update: add “import” to exports object in package.json

v0.4.1 (12/07/2021)

• fix: file name for types main

v0.3.7 (11/18/2021)

• bugfix

Download Details:

Author: bcakmakoglu

Live Demo: https://revue-draggable.vercel.app/

Download Link: https://github.com/bcakmakoglu/revue-draggable/archive/refs/heads/master.zip

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

Install & Download:

# Yarn
$ yarn add @braks/revue-draggable

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