From a0a2c88f36bab5214ef01da98b545c47a988b738 Mon Sep 17 00:00:00 2001 From: David Desmaisons Date: Wed, 12 Oct 2016 23:07:41 -0300 Subject: [PATCH 1/2] Update README.md --- README.md | 79 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 58 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 70385cb9..c6cc9e89 100644 --- a/README.md +++ b/README.md @@ -9,34 +9,58 @@ [![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.Dragable.For.svg)](https://github.com/David-Desmaisons/Vue.Dragable.For/blob/master/LICENSE) -Vue directive for lists allowing drag-and-drop sorting in sync with View-Model. Based on [Sortable.js](https://github.com/RubaXa/Sortable) +Vue component (Vue2.0) or directive (Vue1.0) allowing drag-and-drop and synchronization with view model array. - -##Motivation - -Create a directive that displays a dragable list and keeps in sync the view and underlying view model. +Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable) ##Demo ![demo gif](https://raw.githubusercontent.com/David-Desmaisons/Vue.Dragable.For/master/example.gif) -Simple: -https://jsfiddle.net/dede89/j62g58z7/ +##Features -Two Lists: +* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features +* Keeps in sync view model and view +* No jquery dependency -https://jsfiddle.net/dede89/hqxranrd/ +##For Vue.js 2.0 -Example with list clone: +Use draggable component: -https://jsfiddle.net/dede89/u5ecgtsj/ +``` html + +
{{element.name}}
+
+``` -##Features +### Props +#### list +Type: `Array`
+Required: `false` +Default: `null` -* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) options via options parameters -* Keeps in sync view model and view -* No jquery dependency +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 + +#### option +Type: `Object`
+Required: `true` + +Option used to inicialize the sortable object see: [sortable option documentation](https://github.com/RubaXa/Sortable#options) + +Note that all the method starting by "on" will be ignored as draggable component expose the same API via events. + +#### 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](https://github.com/RubaXa/Sortable#event-object-demo) + + +##For Vue.js 1.0 ##Usage @@ -59,28 +83,41 @@ Option parameter can be json string or a full javascript object. console.log('Collection updated!'); }, ``` +##Vue.js 1.0 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: ``` js - npm install vuedragablefor + npm install vuedragabble ``` ``` js - Bower install vue.dragable.for + Bower install vue.draggable ``` - #### For Modules ``` js // ES6 import Vue from 'vue' - import VueDragableFor from 'vuedragablefor' - Vue.use(VueDragableFor) + import VueDraggable from 'vuedraggable' + Vue.use(VueDraggable) // ES5 var Vue = require('vue') - Vue.use(require('vuedragablefor')) + Vue.use(require('vuedraggable')) ``` - #### For `