Skip to content

Commit 9581106

Browse files
wip updating readme
1 parent f8b292d commit 9581106

File tree

3 files changed

+91
-52
lines changed

3 files changed

+91
-52
lines changed

README.md

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,18 @@
1111
[![MIT License](https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg)](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
1212

1313

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
1516

1617
Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable)
1718

1819
## Demo
1920

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)
2122

2223
## Live Demos
2324

24-
https://sortablejs.github.io/Vue.Draggable/
25-
26-
https://david-desmaisons.github.io/draggable-example/
25+
https://sortablejs.github.io/vue.draggable.next/
2726

2827
## Features
2928

@@ -34,19 +33,11 @@ https://david-desmaisons.github.io/draggable-example/
3433
* Support drag and drop between different lists
3534
* No jQuery dependency
3635
* 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
3837
* Cancellation support
3938
* Events reporting any changes when full control is needed
4039
* 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
4140

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-
5041

5142
## Donate
5243

@@ -86,8 +77,10 @@ Use draggable component:
8677

8778
### Typical use:
8879
``` 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>
9184
</draggable>
9285
```
9386
.vue file:

package-lock.json

Lines changed: 81 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuedraggable",
3-
"version": "3.0.0",
3+
"version": "4.0.0",
44
"description": "draggable component for vue",
55
"license": "MIT",
66
"main": "dist/vuedraggable.umd.min.js",

0 commit comments

Comments
 (0)