Skip to content

Commit 1e5fce3

Browse files
David-DesmaisonsDavid-Desmaisons
committed
WIP updating readme
1 parent 9581106 commit 1e5fce3

File tree

1 file changed

+42
-72
lines changed

1 file changed

+42
-72
lines changed

‎README.md

Lines changed: 42 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@ yarn add vuedraggable
5656
npm i -S vuedraggable
5757
```
5858

59-
**Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0**
60-
6159
### with direct link
6260
```html
6361

@@ -96,38 +94,33 @@ Use draggable component:
9694
9795
### With `transition-group`:
9896
``` html
99-
<draggable v-model="myArray">
100-
<transition-group>
101-
<div v-for="element in myArray" :key="element.id">
102-
{{element.name}}
103-
</div>
104-
</transition-group>
97+
<draggable v-model="myArray" tag="transition-group" item-key="id">
98+
<template #item="{element}">
99+
<div> {{element.name}} </div>
100+
</template>
105101
</draggable>
106102
```
107103
108-
Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
109-
110-
111104
### With footer slot:
112105
``` html
113-
<draggable v-model="myArray" draggable=".item">
114-
<div v-for="element in myArray" :key="element.id" class="item">
115-
{{element.name}}
116-
</div>
117-
<template slot="footer">
118-
<button @click="addPeople">Add</button>
119-
</template>
106+
<draggable v-model="myArray" item-key="id">
107+
<template #item="{element}">
108+
<div> {{element.name}} </div>
109+
</template>
110+
<template #footer>
111+
<button @click="addPeople">Add</button>
112+
</template>
120113
</draggable>
121114
```
122115
### With header slot:
123116
``` html
124-
<draggable v-model="myArray" draggable=".item">
125-
<div v-for="element in myArray" :key="element.id" class="item">
126-
{{element.name}}
127-
</div>
128-
<template slot="header">
129-
<button @click="addPeople">Add</button>
130-
</template>
117+
<draggable v-model="myArray" item-key="id">
118+
<template #item="{element}">
119+
<div> {{element.name}} </div>
120+
</template>
121+
<template #header>
122+
<button @click="addPeople">Add</button>
123+
</template>
131124
</draggable>
132125
```
133126
@@ -174,8 +167,6 @@ The main difference is that `list` prop is updated by draggable component using
174167
**Do not use in conjunction with modelValue prop.**
175168
176169
#### All sortable options
177-
New in version 2.19
178-
179170
Sortable options can be set directly as vue.draggable props since version 2.19.
180171
181172
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.
@@ -259,10 +250,12 @@ Value: an object corresponding to the attributes, props and events we would pass
259250
260251
Example (using [element UI library](http://element.eleme.io/#/en-US)):
261252
```HTML
262-
<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
263-
<el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
264-
<div>{{e.description}}</div>
253+
<draggable tag="el-collapse" :list="list" :component-data="getComponentData()" item-key="name">
254+
<template #item="{element}">
255+
<el-collapse-item :title="element.title" :name="element.name">
256+
<div>{{element.description}}</div>
265257
</el-collapse-item>
258+
</template>
266259
</draggable>
267260
```
268261
```javascript
@@ -320,60 +313,37 @@ Limitation: neither header or footer slot works in conjunction with transition-g
320313
321314
#### Header
322315
Use the `header` slot to add none-draggable element inside the vuedraggable component.
323-
Important: it should be used in conjunction with draggable option to tag draggable element.
324-
Note that header slot will always be added before the default slot regardless its position in the template.
325316
Ex:
326317
327318
``` html
328-
<draggable v-model="myArray" draggable=".item">
329-
<div v-for="element in myArray" :key="element.id" class="item">
330-
{{element.name}}
331-
</div>
332-
<template slot="header">
333-
<button @click="addPeople">Add</button>
334-
</template>
319+
<draggable v-model="myArray" item-key="id">
320+
<template #item="{element}">
321+
<div> {{element.name}} </div>
322+
</template>
323+
<template #header>
324+
<button @click="addPeople">Add</button>
325+
</template>
335326
</draggable>
336327
```
337328
338329
#### Footer
339330
Use the `footer` slot to add none-draggable element inside the vuedraggable component.
340-
Important: it should be used in conjunction with draggable option to tag draggable elements.
341-
Note that footer slot will always be added after the default slot regardless its position in the template.
342331
Ex:
343332
344333
``` html
345-
<draggable v-model="myArray" draggable=".item">
346-
<div v-for="element in myArray" :key="element.id" class="item">
347-
{{element.name}}
348-
</div>
349-
<template slot="footer">
350-
<button @click="addPeople">Add</button>
351-
</template>
334+
<draggable v-model="myArray" item-key="id">
335+
<template #item="{element}">
336+
<div> {{element.name}} </div>
337+
</template>
338+
<template #footer>
339+
<button @click="addPeople">Add</button>
340+
</template>
352341
</draggable>
353342
```
354-
### Gotchas
355-
356-
- Vue.draggable children should always map the list or modelValue prop using a v-for directive
357-
* You may use [header](https://github.com/SortableJS/Vue.Draggable#header) and [footer](https://github.com/SortableJS/Vue.Draggable#footer) slot to by-pass this limitation.
358-
359-
- Children elements inside v-for should be keyed as any element in Vue.js. Be careful to provide relevant key values in particular:
360-
* typically providing array index as keys won't work as key should be linked to the items content
361-
* cloned elements should provide updated keys, it is doable using the [clone props](#clone) for example
362-
363343
364344
### Example
365-
* [Clone](https://sortablejs.github.io/Vue.Draggable/#/custom-clone)
366-
* [Handle](https://sortablejs.github.io/Vue.Draggable/#/handle)
367-
* [Transition](https://sortablejs.github.io/Vue.Draggable/#/transition-example-2)
368-
* [Nested](https://sortablejs.github.io/Vue.Draggable/#/nested-example)
369-
* [Table](https://sortablejs.github.io/Vue.Draggable/#/table-example)
370-
371-
### Full demo example
372-
373-
[draggable-example](https://github.com/David-Desmaisons/draggable-example)
374-
375-
## For Vue.js 1.0
376-
377-
[See here](documentation/Vue.draggable.for.ReadME.md)
378-
379-
```
345+
* [Clone](https://sortablejs.github.io/vue.draggable.next/#/custom-clone)
346+
* [Handle](https://sortablejs.github.io/vue.draggable.next/#/handle)
347+
* [Transition](https://sortablejs.github.io/vue.draggable.next/#/transition-example-2)
348+
* [Nested](https://sortablejs.github.io/vue.draggable.next/#/nested-example)
349+
* [Table](https://sortablejs.github.io/vue.draggable.next/#/table-example)

0 commit comments

Comments
 (0)