Skip to content

Commit 9980e52

Browse files
Update README.md for new version
1 parent 178a29c commit 9980e52

File tree

1 file changed

+41
-21
lines changed

1 file changed

+41
-21
lines changed

README.md

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,44 @@
11
<p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
22
<h1 align="center">Vue.Draggable</h1>
33

4-
[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/Vue.Draggable.svg?maxAge=2592000)]()
5-
[![GitHub closed issues](https://img.shields.io/github/issues-closed/David-Desmaisons/Vue.Draggable.svg?maxAge=2592000)]()
4+
[![GitHub open issues](https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg?maxAge=2592000)](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)
5+
[![GitHub closed issues](https://img.shields.io/github/issues-closed/SortableJS/Vue.Draggable.svg?maxAge=2592000)](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aissue+is%3Aclosed)
66
[![Npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
77
[![Npm version](https://img.shields.io/npm/v/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
88
[![Package Quality](http://npm.packagequality.com/shield/vuedragablefor.svg)](http://packagequality.com/#?package=vuedraggable)
99
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
10-
[![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.Draggable.svg)](https://github.com/David-Desmaisons/Vue.Draggable/blob/master/LICENSE)
10+
[![MIT License](https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg)](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
1111

1212

1313
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
1414

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

17-
##Demo
17+
## Demo
1818

19-
![demo gif](https://raw.githubusercontent.com/David-Desmaisons/Vue.Dragable.For/master/example.gif)
19+
![demo gif](https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif)
2020

2121

22-
##Features
22+
## Features
2323

24-
* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features
25-
* Keeps in sync view model and view
26-
* No jquery dependency
27-
* Plays nicely with Vue.js 2.0 transition-group
28-
* cancelation support
24+
* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
25+
* Supports touch devices
26+
* Supports drag handles and selectable text
27+
* Smart auto-scrolling
28+
* Support drag and drop between different lists
29+
* No jQuery dependency
30+
* Keeps in sync HTML and view model list
31+
* Compatible with Vue.js 2.0 transition-group
32+
* Cancelation support
33+
* Events reporting any changes when full control is needed
2934

30-
##For Vue.js 2.0
35+
## For Vue.js 2.0
3136

3237
Use draggable component:
3338

3439
Typical use:
3540
``` html
36-
<draggable :list="list" :options="{group:'people'}" @start="dragging=true" @end="dragging=false">
41+
<draggable :list="list" :options="{group:'people'}" @start="drag=true" @end="drag=false">
3742
<div v-for="element in list">{{element.name}}</div>
3843
</draggable>
3944
```
@@ -115,8 +120,6 @@ evt object has same property as [Sortable onMove event](https://github.com/RubaX
115120
- `element`: target element view model element
116121
- `list`: target list
117122
- `component`: target VueComponent
118-
119-
Ex:
120123
121124
HTML:
122125
```HTML
@@ -132,19 +135,36 @@ See complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/
132135
133136
134137
### Events
135-
`start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `clone`<br>
136-
events are called when respectivelly onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortabe.js with the same argument.<br>
137-
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
138138
139-
The OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
139+
* Support for Sortable events:
140+
141+
`start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `clone`<br>
142+
events are called when respectivelly onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortabe.js with the same argument.<br>
143+
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
144+
145+
Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
140146
141-
Ex:
142147
HTML:
143148
```HTML
144149
<draggable :list="list" @end="onEnd">
145150
```
146151
147-
###Fiddle
152+
* change event
153+
154+
`change` event is trigerred when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br>
155+
This event is called with one argument containing one of the following properties:
156+
- `added`: contains information of an element added to the array
157+
- `newIndex`: the index of the added element
158+
- `element`: the added element
159+
- `removed`: contains information of an element removed from to the array
160+
- `oldIndex`: the index of the element before remove
161+
- `element`: the removed element
162+
- `moved`: contains information of an element moved within the array
163+
- `newIndex`: the current index of the moved element
164+
- `oldIndex`: the old index of the moved element
165+
- `element`: the moved element
166+
167+
### Fiddle
148168
Simple:
149169
https://jsfiddle.net/dede89/sqssmhtz/
150170

0 commit comments

Comments
 (0)