Vue.Draggable Turbo
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
Based on and offering all features of Sortable.js
Demo
Features
- Fix nested lists bugs
- Full support of Sortable.js features
- Keeps in sync view model and view
- No jquery dependency
- Plays nicely with Vue.js 2.0 transition-group
For Vue.js 2.0
Use draggable component:
Tipical use:
{{element.name}}
With transition-group
:
{{element.name}}
Draggable component should directly wrap the draggable elements, or a transition-component
containing the draggable elements.
Props
list
Type: Array
Required: false
Default: null
Array to be synchronized with drag-and-drop. Typically same array as refrenced by inner element v-for directive.
Note that draggabe component can be used with a list prop
options
Type: Object
Required: false
Option used to inicialize the sortable object see: sortable option documentation
Note that all the method starting by "on" will be ignored as draggable component expose the same API via events.
element
Type: String
Default: 'div'
HTML root element that draggable component create as outer element for the included slot.
clone
Type: Function
Required: false
Default: (original) => { return original;}
Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value should be its cloned version.
By default vue.draggable reuse the viewmodel element, so you have to use this hook if you want to clone or deep clone it.
Events
start
, add
, remove
, update
, end
, choose
, sort
, filter
, move
, clone
Called when there equivalent onStart, onAdd, .... are fired by Sortabe.js with the same argument.
See here for reference
Fiddle
Simple: https://jsfiddle.net/dede89/sqssmhtz/
Two Lists: https://jsfiddle.net/dede89/32ao2rpm/
Example with list clone: https://jsfiddle.net/dede89/t3m5krea/
Example with transition-group: https://jsfiddle.net/dede89/m2v0orcn/
For Vue.js 1.0
Use it exactly as v-for directive, passing optional parameters using 'options' parameter. Options parameter can be json string or a full javascript object.
{{element.name}}
Limitation
- This directive works only when applied to arrays and not to objects.
onStart
,onUpdate
,onAdd
,onRemove
Sortable.js options hooks are used by v-dragable-for to update VM. As such these four options are not usable with v-dragable-for. If you need to listen to re-order events, you can watch the underlying view model collection. For example:
watch:{console;}
fiddle
Simple: https://jsfiddle.net/dede89/j62g58z7/
Two Lists: https://jsfiddle.net/dede89/hqxranrd/
Example with list clone: https://jsfiddle.net/dede89/u5ecgtsj/
Installation
- Available through:
npm install vuedraggable
Bower install vuedraggable
Version 1.0.9 is Vue.js 1.0 compatible
Version 2.0.2 is Vue.js 2.0 compatible
-
#### For Modules
// ES6//For Vue.js 2.0...components:draggable......//For Vue.js 1.0 onlyVue// ES5//For Vue.js 1.0var Vue =Vue//For Vue.js 2.0var draggable = -
#### For
<script>
IncludeJust include
vuedraggable.min.js
or 'vue.dragable.for' after Vue.
lodash(version >=3) is needed only for Vuejs. 1.0 version of the library.