11
11
[ ![ MIT License] ( https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg )] ( https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE )
12
12
13
13
14
- Vue component (Vue.js 2.0 and vue 3) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
14
+ Vue component (Vue.js 3.0) allowing drag-and-drop and synchronization with view model array.
15
+ For Vue 2 and vue 1 version check: https://github.com/SortableJS/Vue.Draggable
15
16
16
17
Based on and offering all features of [ Sortable.js] ( https://github.com/RubaXa/Sortable )
17
18
18
19
## Demo
19
20
20
- ![ demo gif] ( https://raw.githubusercontent.com/SortableJS/Vue.Draggable /master/example.gif )
21
+ ![ demo gif] ( https://raw.githubusercontent.com/SortableJS/vue.draggable.next /master/example.gif )
21
22
22
23
## Live Demos
23
24
24
- https://sortablejs.github.io/Vue.Draggable/
25
-
26
- https://david-desmaisons.github.io/draggable-example/
25
+ https://sortablejs.github.io/vue.draggable.next/
27
26
28
27
## Features
29
28
@@ -34,19 +33,11 @@ https://david-desmaisons.github.io/draggable-example/
34
33
* Support drag and drop between different lists
35
34
* No jQuery dependency
36
35
* Keeps in sync HTML and view model list
37
- * Compatible with Vue.js 2 .0 transition-group
36
+ * Compatible with Vue.js 3 .0 transition-group
38
37
* Cancellation support
39
38
* Events reporting any changes when full control is needed
40
39
* Reuse existing UI library components (such as [ vuetify] ( https://vuetifyjs.com ) , [ element] ( http://element.eleme.io/ ) , or [ vue material] ( https://vuematerial.io ) etc...) and make them draggable using ` tag ` and ` componentData ` props
41
40
42
- ## Backers
43
-
44
- <a href =" https://flatlogic.com/admin-dashboards " >
45
- <img width =" 190 " style =" margin-top : 10px ;" src =" https://flatlogic.com/assets/logo-d9e7751df5fddd11c911945a75b56bf72bcfe809a7f6dca0e32d7b407eacedae.svg " >
46
- </a >
47
-
48
- Admin Dashboard Templates made with Vue, React and Angular.
49
-
50
41
51
42
## Donate
52
43
@@ -86,8 +77,10 @@ Use draggable component:
86
77
87
78
### Typical use:
88
79
``` html
89
- <draggable v-model =" myArray" group =" people" @start =" drag=true" @end =" drag=false" >
90
- <div v-for =" element in myArray" :key =" element.id" >{{element.name}}</div >
80
+ <draggable v-model =" myArray" group =" people" @start =" drag=true" @end =" drag=false" item-key =" id" >
81
+ <template #item =" {element}" >
82
+ <div >{{element.name}}</div >
83
+ </template >
91
84
</draggable >
92
85
```
93
86
.vue file:
0 commit comments