-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
170 lines (113 loc) · 7.52 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Puzzle Demo</title>
<link href="css/demo.css" rel="stylesheet" />
</head>
<body>
<div id="puzzleContainer">
<!-- row 1 -->
<div class="receiver row1 col1" data-empty="true" data-tile="tile_45"></div>
<div class="receiver row1 col3" data-empty="true" data-tile="tile_41"></div>
<div class="receiver row1 col5" data-empty="true" data-tile="tile_37"></div>
<div class="receiver row1 col7" data-empty="true" data-tile="tile_33"></div>
<div class="receiver row1 col9" data-empty="true" data-tile="tile_29"></div>
<!-- row 2 -->
<div class="receiver row2 col2" data-empty="true" data-tile="tile_43"></div>
<div class="receiver row2 col4" data-empty="true" data-tile="tile_39"></div>
<div class="receiver row2 col6" data-empty="true" data-tile="tile_35"></div>
<div class="receiver row2 col8" data-empty="true" data-tile="tile_31"></div>
<!-- row 3 -->
<div class="receiver row3 col1" data-empty="true" data-tile="tile_44"></div>
<div class="receiver row3 col3" data-empty="true" data-tile="tile_40"></div>
<div class="receiver row3 col5" data-empty="true" data-tile="tile_36"></div>
<div class="receiver row3 col7" data-empty="true" data-tile="tile_32"></div>
<div class="receiver row3 col9" data-empty="true" data-tile="tile_28"></div>
<!-- row 4 -->
<div class="receiver row4 col2" data-empty="true" data-tile="tile_42"></div>
<div class="receiver row4 col4" data-empty="true" data-tile="tile_38"></div>
<div class="receiver row4 col6" data-empty="true" data-tile="tile_34"></div>
<div class="receiver row4 col8" data-empty="true" data-tile="tile_30"></div>
<!-- row 5 -->
<div class="receiver row5 col1" data-empty="true" data-tile="tile_27"></div>
<div class="receiver row5 col3" data-empty="true" data-tile="tile_18"></div>
<div class="receiver row5 col5" data-empty="true" data-tile="tile_14"></div>
<div class="receiver row5 col7" data-empty="true" data-tile="tile_10"></div>
<div class="receiver row5 col9" data-empty="true" data-tile="tile_06"></div>
<!-- row 6 -->
<div class="receiver row6 col2" data-empty="true" data-tile="tile_25"></div>
<div class="receiver row6 col4" data-empty="true" data-tile="tile_16"></div>
<div class="receiver row6 col6" data-empty="true" data-tile="tile_12"></div>
<div class="receiver row6 col8" data-empty="true" data-tile="tile_08"></div>
<!-- row 7 -->
<div class="receiver row7 col1" data-empty="true" data-tile="tile_26"></div>
<div class="receiver row7 col3" data-empty="true" data-tile="tile_17"></div>
<div class="receiver row7 col5" data-empty="true" data-tile="tile_13"></div>
<div class="receiver row7 col7" data-empty="true" data-tile="tile_09"></div>
<div class="receiver row7 col9" data-empty="true" data-tile="tile_05"></div>
<!-- row 8 -->
<div class="receiver row8 col2" data-empty="true" data-tile="tile_24"></div>
<div class="receiver row8 col4" data-empty="true" data-tile="tile_15"></div>
<div class="receiver row8 col6" data-empty="true" data-tile="tile_11"></div>
<div class="receiver row8 col8" data-empty="true" data-tile="tile_07"></div>
<!-- row 9 -->
<div class="receiver row9 col1" data-empty="true" data-tile="tile_23"></div>
<div class="receiver row9 col3" data-empty="true" data-tile="tile_22"></div>
<div class="receiver row9 col5" data-empty="true" data-tile="tile_21"></div>
<div class="receiver row9 col7" data-empty="true" data-tile="tile_20"></div>
<div class="receiver row9 col9" data-empty="true" data-tile="tile_19"></div>
<!-- row 1 -->
<img src="img/Group 45.png" alt="" class="draggableImg" id="tile_45" draggable="true">
<img src="img/Group 41.png" alt="" class="draggableImg" id="tile_41" draggable="true">
<img src="img/Group 37.png" alt="" class="draggableImg" id="tile_37" draggable="true">
<img src="img/Group 33.png" alt="" class="draggableImg" id="tile_33" draggable="true">
<img src="img/Group 29.png" alt="" class="draggableImg" id="tile_29" draggable="true">
<!-- row 2 -->
<img src="img/Group 43.png" alt="" class="draggableImg" id="tile_43" draggable="true">
<img src="img/Group 39.png" alt="" class="draggableImg" id="tile_39" draggable="true">
<img src="img/Group 35.png" alt="" class="draggableImg" id="tile_35" draggable="true">
<img src="img/Group 31.png" alt="" class="draggableImg" id="tile_31" draggable="true">
<!-- row 3 -->
<img src="img/Group 44.png" alt="" class="draggableImg" id="tile_44" draggable="true">
<img src="img/Group 40.png" alt="" class="draggableImg" id="tile_40" draggable="true">
<img src="img/Group 36.png" alt="" class="draggableImg" id="tile_36" draggable="true">
<img src="img/Group 32.png" alt="" class="draggableImg" id="tile_32" draggable="true">
<img src="img/Group 28.png" alt="" class="draggableImg" id="tile_28" draggable="true">
<!-- row 4 -->
<img src="img/Group 42.png" alt="" class="draggableImg" id="tile_42" draggable="true">
<img src="img/Group 38.png" alt="" class="draggableImg" id="tile_38" draggable="true">
<img src="img/Group 34.png" alt="" class="draggableImg" id="tile_34" draggable="true">
<img src="img/Group 30.png" alt="" class="draggableImg" id="tile_30" draggable="true">
<!-- row 5 -->
<img src="img/Group 27.png" alt="" class="draggableImg" id="tile_27" draggable="true">
<img src="img/Group 18.png" alt="" class="draggableImg" id="tile_18" draggable="true">
<img src="img/Group 14.png" alt="" class="draggableImg" id="tile_14" draggable="true">
<img src="img/Group 10.png" alt="" class="draggableImg" id="tile_10" draggable="true">
<img src="img/Group 6.png" alt="" class="draggableImg" id="tile_06" draggable="true">
<!-- row 6 -->
<img src="img/Group 25.png" alt="" class="draggableImg" id="tile_25" draggable="true">
<img src="img/Group 16.png" alt="" class="draggableImg" id="tile_16" draggable="true">
<img src="img/Group 12.png" alt="" class="draggableImg" id="tile_12" draggable="true">
<img src="img/Group 8.png" alt="" class="draggableImg" id="tile_08" draggable="true">
<!-- row 7 -->
<img src="img/Group 26.png" alt="" class="draggableImg" id="tile_26" draggable="true">
<img src="img/Group 17.png" alt="" class="draggableImg" id="tile_17" draggable="true">
<img src="img/Group 13.png" alt="" class="draggableImg" id="tile_13" draggable="true">
<img src="img/Group 9.png" alt="" class="draggableImg" id="tile_09" draggable="true">
<img src="img/Group 5.png" alt="" class="draggableImg" id="tile_05" draggable="true">
<!-- row 8 -->
<img src="img/Group 24.png" alt="" class="draggableImg" id="tile_24" draggable="true">
<img src="img/Group 15.png" alt="" class="draggableImg" id="tile_15" draggable="true">
<img src="img/Group 11.png" alt="" class="draggableImg" id="tile_11" draggable="true">
<img src="img/Group 7.png" alt="" class="draggableImg" id="tile_07" draggable="true">
<!-- row 9 -->
<img src="img/Group 23.png" alt="" class="draggableImg" id="tile_23" draggable="true">
<img src="img/Group 22.png" alt="" class="draggableImg" id="tile_22" draggable="true">
<img src="img/Group 21.png" alt="" class="draggableImg" id="tile_21" draggable="true">
<img src="img/Group 20.png" alt="" class="draggableImg" id="tile_20" draggable="true">
<img src="img/Group 19.png" alt="" class="draggableImg" id="tile_19" draggable="true">
</div>
<script src="js/demo-drop-anywhere.js"></script>
</body>
</html>