You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+28-28
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,8 @@
3
3
4
4
[](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)
@@ -22,15 +22,15 @@ Based on and offering all features of [Sortable.js](https://github.com/RubaXa/So
22
22
## Features
23
23
24
24
* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
25
-
* Supports touch devices
25
+
* Supports touch devices
26
26
* Supports drag handles and selectable text
27
27
* Smart auto-scrolling
28
28
* Support drag and drop between different lists
29
29
* No jQuery dependency
30
30
* Keeps in sync HTML and view model list
31
31
* 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
34
34
35
35
## For Vue.js 2.0
36
36
@@ -45,12 +45,12 @@ Typical use:
45
45
46
46
With `transition-group`:
47
47
```html
48
-
<draggable:list="list">
49
-
<transition-group>
50
-
<divv-for="element in list":key="element.id">
51
-
{{element.name}}
52
-
</div>
53
-
</transition-group>
48
+
<draggable:list="list">
49
+
<transition-group>
50
+
<divv-for="element in list":key="element.id">
51
+
{{element.name}}
52
+
</div>
53
+
</transition-group>
54
54
</draggable>
55
55
```
56
56
.vue file:
@@ -61,8 +61,8 @@ With `transition-group`:
61
61
components: {
62
62
draggable,
63
63
},
64
-
...
65
-
```
64
+
...
65
+
```
66
66
67
67
Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
68
68
@@ -94,7 +94,7 @@ Required: `false`<br>
94
94
Default: `(original) => { return original;}`<br>
95
95
96
96
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.
98
98
99
99
#### move
100
100
Type: `Function`<br>
@@ -112,23 +112,23 @@ function onMoveCallback(evt, originalEvent){
112
112
```
113
113
evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:
114
114
- `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
118
118
- `relatedContext`: context linked to current drag operation
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/
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>
143
143
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
144
144
145
145
Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
146
146
147
147
HTML:
148
148
```HTML
149
-
<draggable :list="list" @end="onEnd">
149
+
<draggable :list="list" @end="onEnd">
150
150
```
151
151
152
152
* change event
153
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>
154
+
`change` event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br>
155
155
This event is called with one argument containing one of the following properties:
156
156
- `added`: contains information of an element added to the array
157
157
- `newIndex`: the index of the added element
@@ -167,7 +167,7 @@ HTML:
167
167
### Gotchas
168
168
- Drag operation with empty list:
169
169
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.
0 commit comments