<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drag/Drop jQuery</title> <style> #header { height:100px; border-bottom:1px solid #777;} ul { list-style:none;} li { display:block; width:120px; padding:10px; margin:1px; background:tan; text-align:center; font-size:1.3em; color:white;} li:hover { cursor:move;} #container { width:300px; height:185px; margin:0 20px; background:#ccc; color:white; overflow:auto; border:1px solid #999;} #container.red { background:maroon;} #inst { margin:30px 0 0 20px;} #dl { margin:40px 0 40px 20px;} </style> </head> <body> <h2>Drag and Drop Lists</h2> <div id="header"></div> <ul> <? include"../config.php"; $sql="select * from tdsi_questions"; $query=mysql_query($sql); $numrows=mysql_num_rows($query); for($a=1;$a<=$numrows;$a++){ $rs=mysql_fetch_array($query); ?> <li class="allow"><?=$rs["id_q"]?>.<?=$rs["questions"]?></li> <? } ?> </ul> <p id="inst">Drag item here</p> <div id="container"></div> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" src="control.js"></script> </body> </html>
// JavaScript Document $(document).ready(function(){ $('li').draggable({ revert:true, start: function(){ i = $(this).text(); } }); $('#container').droppable({ hoverClass:'red', accept: '.allow', drop: function(){ // ฟังก์ชั่นนี้จะทำงานทุกครั้งที่มีการดรอปลงในพื้นที่ // พอมีการดรอป ก็สร้างตัวแปรเก็บค่าไว้ ว่ามี id อะไรดรอปลงมาบ้าง // พอส่งข้อมูล ก็เอาข้อมูลจากตัวแปรเหล่านั้นส่งไปด้วย alert('Dropped'); //$('#container').append(i + '<br/>'); $('#container').append('<li>' + i + '</li>'); } }); });
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 02
