001.<!DOCTYPE html>
002.<html>
003.<head>
004. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
010.</head>
011.<body>
012.
013. <?php
014.$con = mysql_connect("localhost","root","2461330210")or die("ERROR".mysql_error());
015.mysql_select_db("project2",$con)
016.
017.?>
018.
019.<select name="room" id="room">
020. <?php
021. $q="select * from room ";
022. $qr=mysql_query($q);
023. while($rs=mysql_fetch_array($qr)){
024. ?>
025. <option value="<?=$rs['room']?>"><?=$rs['room']?></option>
026. <?php } ?>
027.
028.</select>
029.
030.<select name="sub" id="sub">
031. <?php
032. $q="select * from sub ";
033. $qr=mysql_query($q);
034. while($rs=mysql_fetch_array($qr)){
035. ?>
036. <option value="<?=$rs['sub']?>"><?=$rs['sub']?></option>
037. <?php } ?>
038.</select>
039.
040.
041.<select name="day" id="day">
042. <?php
043. $q="select * from day ";
044. $qr=mysql_query($q);
045. while($rs=mysql_fetch_array($qr)){
046. ?>
047. <option value="<?=$rs['day']?>"><?=$rs['day']?></option>
048. <?php } ?>
049.</select>
050.
051.<select name="time1" id="time1">
052. <?php
053. $q="select * from time1 ";
054. $qr=mysql_query($q);
055. while($rs=mysql_fetch_array($qr)){
056. ?>
057. <option value="<?=$rs['time1']?>"><?=$rs['time1']?></option>
058. <?php } ?>
059.</select>-
060.<select name="time2" id="time2">
061. <?php
062. $q="select * from time2 ";
063. $qr=mysql_query($q);
064. while($rs=mysql_fetch_array($qr)){
065. ?>
066. <option value="<?=$rs['time2']?>"><?=$rs['time2']?></option>
067. <?php } ?>
068.</select>
069.
070.
071.
072.<button>Submit</button>
073.
074. <div class="demo-info" style="margin-bottom:10px">
075. <div class="demo-tip icon-tip">
076. </div>
077. </div>
078.
079.<div class="item-container"><div class="item-content" style="text-align: center;"><div></div></div></div>
080.
081. <div style="width:700px;">
082. <div class="left">
083. <table>
084. <tr>
085. <td><div class="item">English</div></td>
086. </tr>
087. <tr>
088. <td><div class="item">Science</div></td>
089. </tr>
090. <tr>
091. <td><div class="item">Music</div></td>
092. </tr>
093. <tr>
094. <td><div class="item">History</div></td>
095. </tr>
096. <tr>
097. <td><div class="item">Computer</div></td>
098. </tr>
099. <tr>
100. <td><div class="item">Mathematics</div></td>
101. </tr>
102. <tr>
103. <td><div class="item">Arts</div></td>
104. </tr>
105. <tr>
106. <td><div class="item">Ethics</div></td>
107. </tr>
108. </table>
109. </div>
110. <div class="right">
111. <table>
112. <tr>
113. <td class="title">date/time</td>
114. <td class="title">08:00</td>
115. <td class="title">09:00</td>
116. <td class="title">10:00</td>
117. <td class="title">11:00</td>
118. <td class="title">12:00</td>
119. <td class="title">13:00</td>
120. <td class="title">14:00</td>
121. <td class="title">15:00</td>
122. <td class="title">16:00</td>
123. <td class="title">17:00</td>
124. <td class="title">18:00</td>
125. <td class="title">19:00</td>
126. <td class="title">20:00</td>
127. <td class="title">21:00</td>
128.
129. </tr>
130. <tr>
131. <td class="time">Monday</td>
132. <td class="drop"></td>
133. <td class="drop"></td>
134. <td class="drop"></td>
135. <td class="drop"></td>
136. <td class="drop"></td>
137. <td class="drop"></td>
138. <td class="drop"></td>
139. <td class="drop"></td>
140. <td class="drop"></td>
141. <td class="drop"></td>
142. <td class="drop"></td>
143. <td class="drop"></td>
144. <td class="drop"></td>
145. <td class="drop"></td>
146. </tr>
147. <tr>
148. <td class="time">Tuesday</td>
149. <td class="drop"></td>
150. <td class="drop"></td>
151. <td class="drop"></td>
152. <td class="drop"></td>
153. <td class="drop"></td>
154. <td class="drop"></td>
155. <td class="drop"></td>
156. <td class="drop"></td>
157. <td class="drop"></td>
158. <td class="drop"></td>
159. <td class="drop"></td>
160. <td class="drop"></td>
161. <td class="drop"></td>
162. <td class="drop"></td>
163. </tr>
164. <tr>
165. <td class="time">Wednesday</td>
166. <td class="drop"></td>
167. <td class="drop"></td>
168. <td class="drop"></td>
169. <td class="drop"></td>
170. <td class="drop"></td>
171. <td class="drop"></td>
172. <td class="drop"></td>
173. <td class="drop"></td>
174. <td class="drop"></td>
175. <td class="drop"></td>
176. <td class="drop"></td>
177. <td class="drop"></td>
178. <td class="drop"></td>
179. <td class="drop"></td>
180. </tr>
181. <tr>
182. <td class="time">Thursday</td>
183. <td class="drop"></td>
184. <td class="drop"></td>
185. <td class="drop"></td>
186. <td class="drop"></td>
187. <td class="drop"></td>
188. <td class="drop"></td>
189. <td class="drop"></td>
190. <td class="drop"></td>
191. <td class="drop"></td>
192. <td class="drop"></td>
193. <td class="drop"></td>
194. <td class="drop"></td>
195. <td class="drop"></td>
196. <td class="drop"></td>
197. </tr>
198. <tr>
199. <td class="time">Friday</td>
200. <td class="drop"></td>
201. <td class="drop"></td>
202. <td class="drop"></td>
203. <td class="drop"></td>
204. <td class="drop"></td>
205. <td class="drop"></td>
206. <td class="drop"></td>
207. <td class="drop"></td>
208. <td class="drop"></td>
209. <td class="drop"></td>
210. <td class="drop"></td>
211. <td class="drop"></td>
212. <td class="drop"></td>
213. <td class="drop"></td>
214. </tr>
215. <tr>
216. <td class="time">Saturday</td>
217. <td class="drop"></td>
218. <td class="drop"></td>
219. <td class="drop"></td>
220. <td class="drop"></td>
221. <td class="drop"></td>
222. <td class="drop"></td>
223. <td class="drop"></td>
224. <td class="drop"></td>
225. <td class="drop"></td>
226. <td class="drop"></td>
227. <td class="drop"></td>
228. <td class="drop"></td>
229. <td class="drop"></td>
230. <td class="drop"></td>
231. </tr>
232. <tr>
233. <td class="time">Sunday</td>
234. <td class="drop"></td>
235. <td class="drop"></td>
236. <td class="drop"></td>
237. <td class="drop"></td>
238. <td class="drop"></td>
239. <td class="drop"></td>
240. <td class="drop"></td>
241. <td class="drop"></td>
242. <td class="drop"></td>
243. <td class="drop"></td>
244. <td class="drop"></td>
245. <td class="drop"></td>
246. <td class="drop"></td>
247. <td class="drop"></td>
248. </tr>
249.
250. </table>
251. </div>
252. </div>
253. <style type="text/css">
254. .left{
255. width:120px;
256. float:left;
257. }
258. .left table{
259. background:#E0ECFF;
260. }
261. .left td{
262. background:#eee;
263. }
264. .right{
265. float:right;
266. width:570px;
267. }
268. .right table{
269. background:#E0ECFF;
270. width:100%;
271. }
272. .right td{
273. background:#fafafa;
274. color:#444;
275. text-align:center;
276. padding:2px;
277. }
278. .right td{
279. background:#E0ECFF;
280. }
281. .right td.drop{
282. background:#fafafa;
283. width:100px;
284. }
285. .right td.over{
286. background:#FBEC88;
287. }
288. .item{
289. text-align:center;
290. border:1px solid #499B33;
291. background:#fafafa;
292. color:#444;
293. width:100px;
294. }
295. .assigned{
296. border:1px solid #BC2A4D;
297. }
298. .trash{
299. background-color:red;
300. }
301.
302. </style>
303. <script>
304. $(function(){
305. $('.left .item').draggable({
306. revert:true,
307. proxy:'clone'
308. });
309. $('.right td.drop').droppable({
310. onDragEnter:function(){
311. $(this).addClass('over');
312. },
313. onDragLeave:function(){
314. $(this).removeClass('over');
315. },
316. onDrop:function(e,source){
317. $(this).removeClass('over');
318. if ($(source).hasClass('assigned')){
319. $(this).append(source);
320. } else {
321. var c = $(source).clone().addClass('assigned');
322. $(this).empty().append(c);
323. c.draggable({
324. revert:true
325. });
326. }
327. }
328. });
329. $('.left').droppable({
330. accept:'.assigned',
331. onDragEnter:function(e,source){
332. $(source).addClass('trash');
333. },
334. onDragLeave:function(e,source){
335. $(source).removeClass('trash');
336. },
337. onDrop:function(e,source){
338. $(source).remove();
339. }
340. });
341. });
342. </script>
343.</body>
344.</html>
