A for Vue.js directive for providing drag and drop capabilities to elements and data
Switch branches/tags
Nothing to show
Clone or download
Latest commit dfbf54c Mar 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore initial commit Dec 10, 2015
LICENSE initial commit Dec 10, 2015
README.md update readme Mar 26, 2018
example.html update for Vue 2 Mar 26, 2018
gulpfile.js initial commit Dec 10, 2015
package-lock.json update for Vue 2 Mar 26, 2018
package.json update for Vue 2 Mar 26, 2018
vue.drag-and-drop.js update for Vue 2 Mar 26, 2018

README.md

vue-drag-and-drop

A directive for providing drag and drop capabilities to elements and data.

Install

Available through npm install vue-drag-and-drop or include as an inline script, like in example.html.

Mobile Support

This library simply wraps the native drag and drop in html5. There is no support, and probably never will be any, for native "drag and drop" on mobile. See this chart.

The reason for this is that touch devices already have the necessary events (touch events) to implement drag and drop without need the additional apis that the desktop drag and drop has.

If you need a cross-platform solution, you should check out this awesome library called pep!.

Demo

demo gif demo gif 2

You can load up the example.html file here to test the directive.

Usage

Here is how you might typically use this directive:

<li v-for="task in tasks" v-bind:id="task.id" v-drag-and-drop v-on:drop="handleDrop" v-text="task.title"></li>

This directive assumes you are using it inside of some sort of list of elements.

You can see a Vue instance in example.html if you want more details.