Skip to content

Commit 230654e

Browse files
Update README.md
1 parent a73c9af commit 230654e

File tree

1 file changed

+50
-2
lines changed

1 file changed

+50
-2
lines changed

README.md

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,59 @@ Default: `(original) => { return original;}`<br>
7979
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>
8080
By default vue.draggable reuse the viewmodel element, so you have to use this hook if you want to clone or deep clone it.
8181

82+
#### move
83+
Type: `Function`<br>
84+
Required: `false`<br>
85+
Default: `null`<br>
86+
87+
If not null this function will be called in a similar way as [Sortable onMove callback](https://github.com/RubaXa/Sortable#move-event-object).
88+
Returning false will cancel the drag operation.
89+
90+
```javascript
91+
function onMoveCallback(evt, originalEvent){
92+
...
93+
// return false; — for cancel
94+
}
95+
```
96+
evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), plus two addicional properties:
97+
`move event` object addicional properties:
98+
- `draggedContext`: context linked to dragged element
99+
- `index`: dragged element index
100+
- `element`: dragged element underlying view model element
101+
- `relatedContext`: context linked to current drag position
102+
- `index`: target element index
103+
- `element`: target element view model element
104+
- `list`: target list
105+
- `component`: target VueComponent
106+
107+
Ex:
108+
109+
HTML:
110+
```HTML
111+
<draggable :list="list" :move="checkMove">
112+
```
113+
javascript:
114+
```javascript
115+
checkMove: function(evt){
116+
return (evt.draggedContext.element.name!=='apple');
117+
}
118+
```
119+
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)
120+
121+
82122
### Events
83-
`start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `move`, `clone`<br>
84-
Called when there equivalent onStart, onAdd, .... are fired by Sortabe.js with the same argument.<br>
123+
`start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `clone`<br>
124+
events are called when respectivelly onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortabe.js with the same argument.<br>
85125
[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
86126

127+
The OnMove callback is mapped with the [move prop]()
128+
129+
Ex:
130+
HTML:
131+
```HTML
132+
<draggable :list="list" @end="onEnd">
133+
```
134+
87135
###Fiddle
88136
Simple:
89137
https://jsfiddle.net/dede89/sqssmhtz/

0 commit comments

Comments
 (0)