Make Your Vue Components Draggable Library

Revue-draggable supports Vue 2 and Vue 3! It comes with batteries 🔋 built-in component/routing/configurable or for users who want more control over a simple abstraction over pull events with the kernel, which is also available as a component/routing/configurable.

Features

Make any element (including SVG) draggable
Use Core to get full control
Built to configure
Supports Vue2 and Vue3! Not a problem!

How to make use of it:

Install and download:

# Yarn
$ yarn add @braks/revue-draggable

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

1. Import and record 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 Revue Draggable as a directive or component.

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

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

3. Props are available.

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: () => {}
}

Make Components Draggable, revue draggable Plugin/Github