132 |
133 |
134 | ```
135 |
136 | ### With Vuex:
137 |
138 | ```html
139 |
140 | ```
141 |
142 | ```javascript
143 | computed: {
144 | myList: {
145 | get() {
146 | return this.$store.state.myList
147 | },
148 | set(value) {
149 | this.$store.commit('updateList', value)
150 | }
151 | }
152 | }
153 | ```
154 |
155 |
156 | ### Props
157 | #### value
158 | Type: `Array`
159 | Required: `false`
160 | Default: `null`
161 |
162 | Input array to draggable component. Typically same array as referenced by inner element v-for directive.
163 | This is the preferred way to use Vue.draggable as it is compatible with Vuex.
164 | It should not be used directly but only though the `v-model` directive:
165 | ```html
166 |
167 | ```
168 |
169 | #### list
170 | Type: `Array`
171 | Required: `false`
172 | Default: `null`
173 |
174 | Alternative to the `value` prop, list is an array to be synchronized with drag-and-drop.
175 | The main difference is that `list` prop is updated by draggable component using splice method, whereas `value` is immutable.
176 | **Do not use in conjunction with value prop.**
177 |
178 | #### All sortable options
179 | New in version 2.19
180 |
181 | Sortable options can be set directly as vue.draggable props since version 2.19.
182 |
183 | This means that all [sortable option](https://github.com/RubaXa/Sortable#options) are valid sortable props with the notable exception of all the method starting by "on" as draggable component expose the same API via events.
184 |
185 | kebab-case propery are supported: for example `ghost-class` props will be converted to `ghostClass` sortable option.
186 |
187 | Example setting handle, sortable and a group option:
188 | ```HTML
189 |
197 |
198 |
199 | ```
200 |
201 | #### tag
202 | Type: `String`
203 | Default: `'div'`
204 |
205 | HTML node type of the element that draggable component create as outer element for the included slot.
206 | It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.
207 | See also [componentData](#componentdata) if you need to set props or event to the created component.
208 |
209 | #### clone
210 | Type: `Function`
211 | Required: `false`
212 | Default: `(original) => { return original;}`
213 |
214 | 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 is its cloned version.
215 | By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
216 |
217 | #### move
218 | Type: `Function`
219 | Required: `false`
220 | Default: `null`
221 |
222 | If not null this function will be called in a similar way as [Sortable onMove callback](https://github.com/RubaXa/Sortable#move-event-object).
223 | Returning false will cancel the drag operation.
224 |
225 | ```javascript
226 | function onMoveCallback(evt, originalEvent){
227 | ...
228 | // return false; — for cancel
229 | }
230 | ```
231 | evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:
232 | - `draggedContext`: context linked to dragged element
233 | - `index`: dragged element index
234 | - `element`: dragged element underlying view model element
235 | - `futureIndex`: potential index of the dragged element if the drop operation is accepted
236 | - `relatedContext`: context linked to current drag operation
237 | - `index`: target element index
238 | - `element`: target element view model element
239 | - `list`: target list
240 | - `component`: target VueComponent
241 |
242 | HTML:
243 | ```HTML
244 |
245 | ```
246 | javascript:
247 | ```javascript
248 | checkMove: function(evt){
249 | return (evt.draggedContext.element.name!=='apple');
250 | }
251 | ```
252 | 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)
253 |
254 | #### componentData
255 | Type: `Object`
256 | Required: `false`
257 | Default: `null`
258 |
259 | This props is used to pass additional information to child component declared by [tag props](#tag).
260 | Value:
261 | * `props`: props to be passed to the child component
262 | * `attrs`: attrs to be passed to the child component
263 | * `on`: events to be subscribe in the child component
264 |
265 | Example (using [element UI library](http://element.eleme.io/#/en-US)):
266 | ```HTML
267 |
268 |
269 |
{{e.description}}
270 |
271 |
272 | ```
273 | ```javascript
274 | methods: {
275 | handleChange() {
276 | console.log('changed');
277 | },
278 | inputChanged(value) {
279 | this.activeNames = value;
280 | },
281 | getComponentData() {
282 | return {
283 | on: {
284 | change: this.handleChange,
285 | input: this.inputChanged
286 | },
287 | attrs:{
288 | wrap: true
289 | },
290 | props: {
291 | value: this.activeNames
292 | }
293 | };
294 | }
295 | }
296 | ```
297 |
298 | ### Events
299 |
300 | * Support for Sortable events:
301 |
302 | `start`, `add`, `remove`, `update`, `end`, `choose`, `unchoose`, `sort`, `filter`, `clone`
303 | Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument.
304 | [See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
305 |
306 | Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
307 |
308 | HTML:
309 | ```HTML
310 |
311 | ```
312 |
313 | * change event
314 |
315 | `change` event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.
316 | This event is called with one argument containing one of the following properties:
317 | - `added`: contains information of an element added to the array
318 | - `newIndex`: the index of the added element
319 | - `element`: the added element
320 | - `removed`: contains information of an element removed from to the array
321 | - `oldIndex`: the index of the element before remove
322 | - `element`: the removed element
323 | - `moved`: contains information of an element moved within the array
324 | - `newIndex`: the current index of the moved element
325 | - `oldIndex`: the old index of the moved element
326 | - `element`: the moved element
327 |
328 | ### Slots
329 |
330 | Limitation: neither header or footer slot works in conjunction with transition-group.
331 |
332 | #### Header
333 | Use the `header` slot to add none-draggable element inside the vuedraggable component.
334 | Important: it should be used in conjunction with draggable option to tag draggable element.
335 | Note that header slot will always be added before the default slot regardless its position in the template.
336 | Ex:
337 |
338 | ``` html
339 |
340 |
341 | {{element.name}}
342 |
343 |
344 |
345 | ```
346 |
347 | #### Footer
348 | Use the `footer` slot to add none-draggable element inside the vuedraggable component.
349 | Important: it should be used in conjunction with draggable option to tag draggable elements.
350 | Note that footer slot will always be added after the default slot regardless its position in the template.
351 | Ex:
352 |
353 | ``` html
354 |
355 |
