vue使用 Revue Draggable 使组件可拖动 - revue-draggable

vue使用 Revue Draggable 使组件可拖动 -  revue-draggable
插件名称 revue-draggable
发布时间 2021年7月22日
插件作者 bcakmakoglu

Revue Draggable 是一个 Vue 库,可以在任何 Vue 3 或 Vue 2 组件上启用可拖动功能。

安装和下载:

# Yarn
$ yarn add @braks/revue-draggable

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

使用

1. 导入并注册 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. 使用 Revue Draggable 作为指令或组件。

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

3.可用道具。

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. 事件。

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