1
+ <!doctype html>
2
+ < html class ="no-js " lang ="">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < meta http-equiv ="x-ua-compatible " content ="ie=edge ">
6
+ < title > Example two lists clone</ title >
7
+ < meta name ="description " content ="">
8
+ < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
9
+
10
+ < link rel ="stylesheet " href ="css/main.css ">
11
+ </ head >
12
+ < body >
13
+
14
+ < div id ="main ">
15
+ < h1 > Vue Dragable For</ h1 >
16
+
17
+ < 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 ">
21
+ {{element.name}} {{$index}}
22
+ </ div >
23
+ </ div >
24
+
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 >
29
+ </ div >
30
+
31
+ < div class ="normal ">
32
+ < h2 > List 1 v-for</ h2 >
33
+ < div >
34
+ < div v-for ="element in list1 " track-by ="$index "> {{element.name}}</ div >
35
+ </ div >
36
+
37
+ < h2 > List 2 v-for</ h2 >
38
+ < div >
39
+ < div v-for ="element in list2 " track-by ="$index "> {{element.name}}</ div >
40
+ </ div >
41
+ </ div >
42
+
43
+ < a href ="index.html "> See basic example</ a >
44
+ < a href ="Two_Lists.html "> See 2 lists example</ a >
45
+ < a href ="Two_Lists_Clone_If.html "> See clone v-if element example</ a >
46
+
47
+ < script type ="text/javascript " src ="..\libs\vue\dist\vue.js "> </ script >
48
+ < script type ="text/javascript " src ="..\libs\lodash\lodash.js "> </ script >
49
+ < script type ="text/javascript " src ="..\libs\Sortable\Sortable.js "> </ script >
50
+ < script type ="text/javascript " src ="src\vuedragablefor.js "> </ script >
51
+ < script type ="text/javascript " src ="script\complex.js "> </ script >
52
+
53
+ </ div >
54
+ </ body >
55
+ </ html >
0 commit comments