vue-drag-drop

A lightweight wrapper that abstracts away the wonkier parts of the Drag and Drop API.

View demo Download Source

The Drag and Drop API is pretty jank. Here are a handful of annoying issues:

  • Data transferred from a draggable element to a dropzone is only available in the dropzone's drop event. Want to take a look at the draggable's data during the dragover event? Say, to determine whether or not we can allow the drop? Sorry! No helpful UI feedback for your users!
  • Got an object or an array you want to transfer between a draggable and a dropzone? Tough. Gotta serialize it. Say goodbye to your references.
  • Did you remember to do event.preventDefault() on dragover for every element you want to be used as a dropzone?

And so on.

The goal of this package is to provide a simple, lightweight wrapper around the API so you don't have to fiddle with all that nonsense. There are plenty of existing Vue components that provide rich handling of drag and drop, usually between or among lists and with tons of bells and whistles. They're great, but sometimes you don't need all that business, or it even gets in the way.

Installation

npm install --save vue-drag-drop

Default import

import Vue from 'vue';
import { Drag, Drop } from 'vue-drag-drop';

Vue.component('drag', Drag);
Vue.component('drop', Drop);

Or install both:

import Vue from 'vue';
import VueDragDrop from 'vue-drag-drop';

Vue.use(VueDragDrop);

Browser

<script src="vue.js"></script>
<script src="vue-drag-drop/dist/vue-drag-drop.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Vue.component('drag', VueDragDrop.Drag)
Vue.component('drop', VueDragDrop.Drop)

Or install both:

Vue.use(VueDragDrop)

GitHub