Skip to content

Commit 9b0d8f7

Browse files
committed
Minor fixes to README.md:
- fixed typos - replaced tabs with spaces - removed trailing whitespace - fixed a few capitalization errors
1 parent 2a6f697 commit 9b0d8f7

File tree

1 file changed

+28
-28
lines changed

1 file changed

+28
-28
lines changed

README.md

+28-28
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
[![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)
55
[![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)
6-
[![Npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
7-
[![Npm version](https://img.shields.io/npm/v/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
6+
[![npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
7+
[![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/)
1010
[![MIT License](https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg)](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
@@ -22,15 +22,15 @@ Based on and offering all features of [Sortable.js](https://github.com/RubaXa/So
2222
## Features
2323

2424
* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
25-
* Supports touch devices
25+
* Supports touch devices
2626
* Supports drag handles and selectable text
2727
* Smart auto-scrolling
2828
* Support drag and drop between different lists
2929
* No jQuery dependency
3030
* Keeps in sync HTML and view model list
3131
* Compatible with Vue.js 2.0 transition-group
32-
* Cancelation support
33-
* Events reporting any changes when full control is needed
32+
* Cancellation support
33+
* Events reporting any changes when full control is needed
3434

3535
## For Vue.js 2.0
3636

@@ -45,12 +45,12 @@ Typical use:
4545

4646
With `transition-group`:
4747
``` html
48-
<draggable :list="list">
49-
<transition-group>
50-
<div v-for="element in list" :key="element.id">
51-
{{element.name}}
52-
</div>
53-
</transition-group>
48+
<draggable :list="list">
49+
<transition-group>
50+
<div v-for="element in list" :key="element.id">
51+
{{element.name}}
52+
</div>
53+
</transition-group>
5454
</draggable>
5555
```
5656
.vue file:
@@ -61,8 +61,8 @@ With `transition-group`:
6161
components: {
6262
draggable,
6363
},
64-
...
65-
```
64+
...
65+
```
6666
6767
Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
6868
@@ -94,7 +94,7 @@ Required: `false`<br>
9494
Default: `(original) => { return original;}`<br>
9595
9696
Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value should be its cloned version.<br>
97-
By default vue.draggable reuse the viewmodel element, so you have to use this hook if you want to clone or deep clone it.
97+
By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
9898
9999
#### move
100100
Type: `Function`<br>
@@ -112,23 +112,23 @@ function onMoveCallback(evt, originalEvent){
112112
```
113113
evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:
114114
- `draggedContext`: context linked to dragged element
115-
- `index`: dragged element index
116-
- `element`: dragged element underlying view model element
117-
- `futureIndex`: potencial index of the dragged element if the drop operation is accepted
115+
- `index`: dragged element index
116+
- `element`: dragged element underlying view model element
117+
- `futureIndex`: potential index of the dragged element if the drop operation is accepted
118118
- `relatedContext`: context linked to current drag operation
119-
- `index`: target element index
120-
- `element`: target element view model element
121-
- `list`: target list
122-
- `component`: target VueComponent
119+
- `index`: target element index
120+
- `element`: target element view model element
121+
- `list`: target list
122+
- `component`: target VueComponent
123123
124124
HTML:
125125
```HTML
126-
<draggable :list="list" :move="checkMove">
126+
<draggable :list="list" :move="checkMove">
127127
```
128128
javascript:
129129
```javascript
130130
checkMove: function(evt){
131-
return (evt.draggedContext.element.name!=='apple');
131+
return (evt.draggedContext.element.name!=='apple');
132132
}
133133
```
134134
See complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/Cancel.html), [cancel.js](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/script/cancel.js)
@@ -139,19 +139,19 @@ See complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/
139139
* Support for Sortable events:
140140
141141
`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>
142+
Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortable.js with the same argument.<br>
143143
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
144144
145145
Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
146146
147147
HTML:
148148
```HTML
149-
<draggable :list="list" @end="onEnd">
149+
<draggable :list="list" @end="onEnd">
150150
```
151151
152152
* change event
153153
154-
`change` event is trigerred when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br>
154+
`change` event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br>
155155
This event is called with one argument containing one of the following properties:
156156
- `added`: contains information of an element added to the array
157157
- `newIndex`: the index of the added element
@@ -167,7 +167,7 @@ HTML:
167167
### Gotchas
168168
- Drag operation with empty list:
169169
170-
To be abble to drag items on an empty draggable component, set a min-height>0 on the `draggable` component or the `transition-group` if any.
170+
To be able to drag items on an empty draggable component, set a min-height>0 on the `draggable` component or the `transition-group` if any.
171171
172172
### Fiddle
173173
@@ -209,7 +209,7 @@ https://jsfiddle.net/dede89/m2v0orcn/
209209
...
210210
}
211211
...
212-
212+
213213
//For Vue.js 2.0
214214
var draggable = require('vuedraggable')
215215
```

0 commit comments

Comments
 (0)