This project is not finished. Do not use it.

VueDragDrop

A drag and drop solution for Vue.

demo

Try it out!

dependencies

• Vue

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.DragItem.name]: VueDragDrop.DragItem,
    [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

VueDragItem

properties

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

events

event	description
drag-start
drag-end
drag

VueDropArea

properties

property	type	default
tag	String	'div'
accept	Function	stubTrue
overlapThreshold	Number	1

events

event	description
drag-start
drag-end
drag-over
drag-out
drag
drag-outside
drag-inside
drop