Package Exports

vue-draggable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-draggable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VueDraggable

Description

VueJS 2.* directive for drag and drop

Native HTML5 drag and drop implementation made for VueJS

Try this demo https://codepen.io/nikolasp/pen/yvpWJR

Installation

npm install --save vue-draggable

yarn add vue-draggable

Setup VueDraggable

import Vue from 'vue'
import VueDraggable from 'vue-draggable'

Vue.use(VueDraggable)

Usage

In the template, use the v-drag-and-drop directive:

HTML

<div v-drag-and-drop:options="options">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ul>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
  </ul>
</div>

Options

Directive `v-drag-and-drop` options

{
  dropzoneSelector: 'ul',
  draggableSelector: 'li',
  excludeOlderBrowsers: true,
  multipleDropzonesItemsDraggingEnabled: true,
  showDropzoneAreas: true,
  onDrop: function(event) {},
  onDragstart: function(event) {},
  onDragend: function(event) {}
}

Event Params for `onDrop`, `onDragstart`, `onDragend` callbacks

{
  nativeEvent: {}, // native js event
  items: [], // list of selected draggable elements
  owner: null, // old dropzone element
  droptarget: null // new dropzone element
}

LICENCE MIT - Created by Nikola Spalevic (nikolaspalevic@gmail.com)

vue-draggable