September 16, 2022

[Revue] ๐Ÿค Vue Components Draggable Supports Vue3 and Vue2

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.

vue draggable div, vue draggable dialog, vuejs drag and drop grid, vue drag and drop, bs vue draggable, vue draggable button, vue draggable custom component

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 registerย 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 With Revue Draggable, Revue draggable Plugin/Github, vuetify drag and drop


See Demo And Download

Official Website(bcakmakoglu): Click Here

This superior jQuery/javascript plugin is developed by bcakmakoglu. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.