|
 |
| |
สอบถามปัญหา การรับค่าจาก droppable จะต้องเขียนโค้ดยังไงครับ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<?
session_start();
?>
<!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>teacher_chooseFrame</title>
<link rel="stylesheet" href="jquery-ui-1.8.23/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.8.23/development-bundle/jquery-1.8.0.js"></script>
<script src="jquery-ui-1.8.23/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.8.23/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.8.23/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.8.23/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="jquery-ui-1.8.23/development-bundle/ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.23/development-bundle/demos.css">
<!--
ul = ภาพรวมของทั้งหมด
list1 = ภาพรวมของกล่อง
list1 li = กรอบของกล่อง
list1 div = ข้อความในกล่อง
-->
<style>
ul { margin:5px; padding:5px; margin-left:10px; }
#list1 { width:380px; list-style-type:none; height:360px; background-color:#0099FF ; margin-left:80px ;}
#list1 li { float:left; padding:5px; width:60px; height:60px; }
#list1 div { width:60px; height:40px; border:solid 1px black; background-color: #9C6; text-align:center; padding-top:20px;}
.headline {
text-align: center;
font-family: "TH SarabunPSK";
font-size: 36px;
}
dropzone{ margin:0px; }
#droppable { width: 75px; height: 80px; float: left;}
#mon_p1 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
#mon_p2 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
#mon_p3 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
.day {
text-align: center;
font-family:"TH SarabunPSK";
font-size:24px
}
.bt {text-align: center;}
</style>
<script>
$(function() {
$( "#list1 div" ).draggable({ snap: ".ui-widget-header" ,revert: "invalid" });
//$( "#mon_p1 div" ).droppable( "option", "addClasses1", true );
//var addClasses1 = $( "#mon_p1 div" ).droppable( "option", "addClasses1" );
alert (addClasses1+"111"); // ยังไม่มีตัวแปรนี้ เลยแสดงผลว่า unidentified
$( "#mon_p1 div" ).droppable({
drop: function(event, ui)
{
alert (addClasses1+"333");
$(this)
.addClass( "ui-state-highlight" )
.html("Dropped!!")
//.droppable("destroy")
//.dragsort("destroy")
.droppable( "option", "addClasses1", true );//setter
alert (addClasses1+"444");
},
tolerance: "fit" ,
addClasses1: false
})
//getter
var addClasses1 = $( "#mon_p1 div" ).droppable( "option", "addClasses1" );
//setter
$( "#mon_p1 div" ).droppable( "option", "addClasses1", true );
alert (addClasses1+"222"); //
$( "#mon_p2 div" ).droppable({
drop: function Drop(event, ui) {
var draggableId = ui.draggable.attr("id");
var droppableId = $(this).attr("id");
alert (droppableId);
}
});
$( "#mon_p3 div" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$("#list1 div").dragsort("destroy");
}
});
});
</script>
</head>
<body>
<h1 class="headline">ลากคาบที่สอนใส่ในตาราง</h1>
<?
//echo $_SESSION["subjectname1"]."<br>";
//echo $_SESSION["subjectname2"]."111<br>";
//echo $_SESSION["subjectname3"]."222<br>";
//echo $_SESSION["subjectname4"]."333<br>";
?>
<div class="demo">
<table>
<tr>
<td valign="top">
<ul id="list1"><!-- area ที่ box อยู่ -->
<li><div title='ชื่อวิชา'>รหัสวิชา</div></li>
<? for($a1=1;$a1<=$_SESSION["ppw1"];$a1++){
echo "<li><div title='".$_SESSION["subjectname1"]."\n'>".$_SESSION["subjectcode1"]."</div></li>";
}
?>
<? for($a2=1;$a2<=$_SESSION["ppw2"];$a2++){
echo "<li><div title='".$_SESSION["subjectname2"]."\n'>".$_SESSION["subjectcode2"]."</div></li>";
}
?>
</ul>
</td>
<td>
<form method="post" action="11111.php">
<table width="660" border="1" align="center">
<tr align="center" class="day">
<td width="25" height="25"> </td>
<td width="75" height="25">คาบที่ 1</td>
<td width="75" height="25">คาบที่ 2</td>
<td width="75" height="25">คาบที่ 3</td>
<td width="75" height="25">คาบที่ 4</td>
<td width="50" height="25"> </td>
<td height="25">คาบที่ 5</td>
<td height="25">คาบที่ 6</td>
<td height="25">คาบที่ 7</td>
</tr>
<tr><!-- แถว วันจันทร์ -->
<td width="25" height="80" class="day">จ.</td>
<td width="75" height="80">
<dropzone id="mon_p1">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="mon_p2"><!-- ต้องทำเพิ่มให้ครบทุกวัน -->
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="mon_p3">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="mon_p4">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="50" height="80"></td>
<td width="80" height="80">
<dropzone id="mon_p5">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="80" height="80">
<dropzone id="mon_p6">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="80" height="80">
<dropzone id="mon_p7">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
</tr>
<tr>
<td width="25" height="80" class="day">อ.</td>
<td width="75" height="80">
<dropzone id="tue_p1">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="tue_p2">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="tue_p3">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="75" height="80">
<dropzone id="tue_p4">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td width="50" height="80"> </td>
<td height="80">
<dropzone id="tue_p5">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td height="80">
<dropzone id="tue_p6">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
<td height="80">
<dropzone id="tue_p7">
<div class="ui-widget-header"><p>Drop here</p></div>
</dropzone>
</td>
</tr>
</table>
<p class="bt" >
<input value="ส่งข้อมูล" type="submit">
<input value="Reset" type="reset">
</p>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
คำสั่ง getter และ setter ใช้ยังไงครับ แล้วถ้าผมต้องการเก็บค่าไว้เพื่อจะส่งต่อไปที่หน้าอื่นต้องทำยังไงครับ รบกวนผู้รู้ชี้แนะทีครับ
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2012-09-29 15:57:45 |
By :
เด็กหัดใช้ |
View :
1033 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองอธิบายการทำงานคร่าว ๆ ดูครับ 
|
| |
|
|
| |
| Date :
2012-09-30 08:15:34 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เริ่มจากตอนแรกครับ ผมสร้าง กล่องสี่เหลี่ยมที่มีชื่อวิชาอยู่ในนั้น ซึ่งกล่องนี้สามารถลากได้ (draggable) และ สร้างตารางโดยแบ่งเป็นช่องเล็กๆ สามารถวางได้ (droppable) เพื่อที่จะรับค่าหากลากวิชามาไว้ในแต่ละช่องครับ เพื่อนำไปใช้ในการจัดตารางสอนต่อไป
แต่ผมไม่รู้ว่าจะรับค่า รหัสวิชาที่นำไปวางบน คาบแต่ละคาบยังไง ครับ
รบกวนด้วยนะครับ ขอบพระคุณครับ
|
| |
|
|
| |
| Date :
2012-09-30 16:48:29 |
By :
akumajoker |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
