File tree Expand file tree Collapse file tree 1 file changed +51
-1
lines changed
Expand file tree Collapse file tree 1 file changed +51
-1
lines changed Original file line number Diff line number Diff line change 22Vue directive for lists allowing drag-and-drop sorting in sync with View-Model. Based on [ Sortable.js] ( https://github.com/RubaXa/Sortable )
33
44
5- #Example
5+ ##Motivation
6+
7+ Create a directive that displays a dragable list and keeps in sync the view and underlying view model.
8+
9+ ##Demo
10+
11+ Simple:
612
713https://jsfiddle.net/dede89/j62g58z7/
14+
15+ Two Lists:
16+
17+ https://jsfiddle.net/dede89/hqxranrd/
18+
19+ ##Feature
20+
21+ * Full support of [ Sortable.js] ( https://github.com/RubaXa/Sortable ) options via options parameters
22+ * Keeps in sync view model and view
23+ * No jquery dependency
24+
25+ ##Usage
26+
27+ Use it exactly as v-for directive, passing optional parameters using 'options' parameter.
28+
29+ ``` html
30+ <template v-dragable-for =" element in list1" options =' {"group":"people"}' >
31+ <p >{{element.name}}</p >
32+ </template >
33+ ```
34+ ## Installation
35+ - Available through:
36+ ``` js
37+ npm install vuedragablefor
38+ ```
39+ ``` js
40+ Bower install vue .dragable .for
41+ ```
42+ - #### For Modules
43+
44+ ``` js
45+ // ES6
46+ import Vue from ' vue'
47+ import VueDragableFor from ' vuedragablefor'
48+ Vue .use (VueDragableFor)
49+
50+ // ES5
51+ var Vue = require (' vue' )
52+ Vue .use (require (' vuedragablefor' ))
53+ ```
54+
55+ - #### For ` <script> ` Include
56+
57+ Just include ` vue.dragable.for.js ` after Vue itself.
You can’t perform that action at this time.
0 commit comments