Skip to content

Commit 8f3896d

Browse files
David-DesmaisonsDavid-Desmaisons
committed
updating examples
1 parent 7945a38 commit 8f3896d

File tree

4 files changed

+35
-35
lines changed

4 files changed

+35
-35
lines changed

‎examples/Two_Lists_Clone_If.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,28 @@
1515
<h1>Vue Dragable For</h1>
1616

1717
<div class="drag">
18-
<h2>List 1 v-dragable-for</h2>
19-
<div id="list1" class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone","put":false}}' v-if="element.id > 2" track-by="$index">
18+
<h2>List 1 dragable</h2>
19+
<draggable id="list1" class="dragArea" :list="list1" :options="{group:{ name:'people', pull:'clone',put:false}}">
20+
<div v-for="(element, index) in list1" v-if="element.id > 2" :key="index">
2121
{{element.name}}, id: {{element.id}}
2222
</div>
23-
</div>
23+
</draggable>
2424

25-
<h2>List 2 v-dragable-for</h2>
26-
<div id="list2" class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index" v-if="element.id > 3">{{element.name}}, id: {{element.id}}</div>
28-
</div>
25+
<h2>List 2 dragable</h2>
26+
<draggable id="list2" class="dragArea" :list="list2" :options="{group:'people'}">
27+
<div v-for="(element,index) in list2" :key="index" v-if="element.id > 3">{{element.name}}, id: {{element.id}}</div>
28+
</draggable>
2929
</div>
3030

3131
<div class="normal">
3232
<h2>List 1 v-for</h2>
3333
<div>
34-
<div v-for="element in list1" track-by="$index">{{element.name}} {{$index}}</div>
34+
<div v-for="(element,index) in list1" track-by="$index">{{element.name}} {{index}}</div>
3535
</div>
3636

3737
<h2>List 2 v-for</h2>
3838
<div>
39-
<div v-for="element in list2" track-by="$index">{{element.name}} {{$index}}</div>
39+
<div v-for="(element,index) in list2" track-by="$index">{{element.name}} {{index}}</div>
4040
</div>
4141
</div>
4242

‎examples/Two_Lists_If.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,28 @@
1515
<h1>Vue Dragable For</h1>
1616

1717
<div class="drag">
18-
<h2>List 1 v-dragable-for</h2>
19-
<div id="list1" class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "put":false}}' v-if="element.id > 2">
21-
{{element.name}} {{$index}}
18+
<h2>List 1 dragable</h2>
19+
<draggable id="list1" class="dragArea" :list="list1" :options="{group:{name:'people', pull:'clone', put:false }}">
20+
<div v-for="(element, index) in list1" v-if="element.id > 2">
21+
{{element.name}} {{index}}
2222
</div>
23-
</div>
23+
</draggable>
2424

25-
<h2>List 2 v-dragable-for</h2>
26-
<div id="list2" class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
28-
</div>
25+
<h2>List 2 dragable</h2>
26+
<draggable id="list2" class="dragArea" :options="{group:'people'}" :list="list2">
27+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
28+
</draggable>
2929
</div>
3030

3131
<div class="normal">
3232
<h2>List 1 v-for</h2>
3333
<div>
34-
<div v-for="element in list1" track-by="$index">{{element.name}}</div>
34+
<div v-for="(element, index) in list1" :key="index">{{element.name}}</div>
3535
</div>
3636

3737
<h2>List 2 v-for</h2>
3838
<div>
39-
<div v-for="element in list2" track-by="$index">{{element.name}}</div>
39+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
4040
</div>
4141
</div>
4242

‎examples/Two_Lists_NoClone_If.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,28 @@
1515
<h1>Vue Dragable For</h1>
1616

1717
<div class="drag">
18-
<h2>List 1 v-dragable-for</h2>
19-
<div id="list1" class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":{ "name":"people" }}' track-by="$index" v-if="element.id > 2">
18+
<h2>List 1 dragable</h2>
19+
<draggable id="list1" class="dragArea" :options="{group:'people'}" :list="list1">
20+
<div v-for="(element, index) in list1" :key="index" v-if="element.id > 2">
2121
{{element.name}} {{$index}}
2222
</div>
23-
</div>
23+
</draggable>
2424

25-
<h2>List 2 v-dragable-for</h2>
26-
<div id="list2" class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index" v-if="element.id > 3">{{element.name}}</div>
28-
</div>
25+
<h2>List 2 dragable</h2>
26+
<draggable id="list2" class="dragArea" :options="{group:'people'}" :list="list2">
27+
<div v-for="(element, index) in list2" :key="index" v-if="element.id > 3">{{element.name}}</div>
28+
</draggable>
2929
</div>
3030

3131
<div class="normal">
3232
<h2>List 1 v-for</h2>
3333
<div>
34-
<div v-for="element in list1" track-by="$index">{{element.name}}</div>
34+
<div v-for="(element, index) in list1" :key="index">{{element.name}}</div>
3535
</div>
3636

3737
<h2>List 2 v-for</h2>
3838
<div>
39-
<div v-for="element in list2" track-by="$index">{{element.name}}</div>
39+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
4040
</div>
4141
</div>
4242

‎examples/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
<div id="main">
1515
<h1>Vue Draggable</h1>
1616

17-
<div>
17+
<div class="drag">
1818
<h2>Draggable</h2>
19-
<draggable class="drag" :list="list">
19+
<draggable :list="list">
2020
<div v-for="element in list">{{element.name}}</div>
2121
</draggable>
2222
</div>
2323

24-
<div>
24+
<div class="normal">
2525
<h2>Normal v-for</h2>
26-
<div class="normal">
26+
<div >
2727
<div v-for="element in list">{{element.name}}</div>
2828
</div>
2929
</div>

0 commit comments

Comments
 (0)