A Simple Drag & Drop example created in Vue.js

by Vue.js Examples

VueDragDrop

A Simple Drag & Drop example created in Vue.js.

View demo Download Source

setup

npm

npm install @seregpie/vuedragdrop

ES module

Register the components globally.

import Vue from 'vue';
import VueDragDrop from '@seregpie/vuedragdrop';

Vue.use(VueDragDrop);

or

Register the components in the scope of another instance.

import VueDragDrop from '@seregpie/vuedragdrop';

export default {
  // ...
  components: {
    [VueDragDrop.DargItem.name]: VueDragDrop.DargItem,
    [VueDragDrop.DropArea.name]: VueDragDrop.DropArea,
  },
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vuedragdrop"></script>

If Vue is detected, the components will be registered automatically.

usage

...

components

VueDragIten

properties

property type default
tag String 'div'
revertDuration Number 0
restrict
data

VueDropArea

properties

property type default
tag String 'div'

GitHub