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 2
2
Vue directive for lists allowing drag-and-drop sorting in sync with View-Model. Based on [ Sortable.js] ( https://github.com/RubaXa/Sortable )
3
3
4
4
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:
6
12
7
13
https://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