|
 |
| |
สอบถามปัญหา การรับค่าจาก 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>testdrop</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:360px; height:360px; list-style-type:none; background-color:#0099FF ; margin-left:80px ;}
#list1 li { width:80px; height:40px; float:left; padding:5px; padding-top:5px;}
#list1 div { width:80px; height:30px; border:solid 1px black; background-color: #9C6; text-align:center; padding-top:10px;}
.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; }
#mon_p4 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
#mon_p5 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
#mon_p6 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
#mon_p7 div {width:75px; height:80px; border:solid 1px black; text-align:center; color:#0066CC; }
showzone{}
#s_mon_p1 div{ width:80px; height:30px; text-align:center;}
.day {
text-align: center;
font-family:"TH SarabunPSK";
font-size:24px
}
.bt {text-align: center;}
</style>
<script>
$(function() {
<? //สามารถทำลูปได้
for ($t1=1;$t1<=4;$t1++){ // t เท่ากับ จำนวนวิชา
for ($x1=1;$x1<=4;$x1++){ //x1 เท่ากับ ppw
echo "$( '#sub".$t1."_t".$x1." div' ).draggable({ snap: '.ui-widget-header' ,revert: 'invalid' });\n";
}
}
?>
$( "#mon_p1 div" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
addClasses : false ;
var addClasses = $( this ).droppable( "option", "addClasses" );
//alert(addClasses);
if (addClasses=true)//ถ้าวางแล้วจะเป็น true
{
//alert("1111");
var test= "period1";
box1.value=test;
s_name1.value=test;
s_name2.value=test; // ยังทำให้รู้ว่าตัวไหนที่รับค่าไม่ได้
alert ($(this).droppable);
//$(this).droppable("destroy");
//$(this).draggable({ stop: function(event, ui) { } });
//$(this ).draggable("destroy");// ทำงานได้ แสดงว่า $(this ).draggable ใช้ได้
//exit();
}
}
});
$( "#mon_p2 div" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
addClasses : false ;
var addClasses = $( this ).droppable( "option", "addClasses" );
//alert(addClasses);
if (addClasses=true)//ถ้าวางแล้วจะเป็น true
{
//alert("1111");
var test= "period2";
//box2.value=test+s_name1.id;
//box2.value=sub1_t1.value;
//s_name1.value=test; // วิธีแก้ไคือใช้ตัวแปรเดียวกันในการเก็บค่า
//s_name2.value=test;
//exit();
//alert (sub1_t1.value);
var chk = $(this).draggable.id ;
alert (chk);
// check ชื่อวิชา
if (chk==2){
alert (chk);
alert ("111");
box2.value=chk;
}else{
alert ("222");
}
}
//$("#list1 div").dragsort("destroy");
},
out : function (event ,ui ){
$( this )
//.addClass( "ui-state-highlight" )
.find( "p" )
.html( "out" );
box2.value="";
//addClasses : false ;
}
});
});
</script>
</head>
<body>
<h1 class="headline">ลากคาบที่สอนใส่ในตาราง</h1>
<div class="demo">
<table>
<tr>
<td valign="top">
<ul id="list1"><!-- area ที่ box อยู่ -->
<li id="sub1_t1" > <!-- ค่าตรงนี้ใช้ได้เฉพาะตัวเลขเท่านั้น default = 0 และ 1 ตัวแปรจะใช้ได้ครั้งเดียวเท่านั้น เรียกซ้ำมาเปลี่ยนค่าไม่ได้ -->
<div title='ชื่อวิชา'><input type="text" name="s_name1" id="s_name1"/>รหัสวิชา1</div><!-- เวลาใช้ ใช้ id ชื่อไม่จำเป็น-->
</li>
<li id="sub1_t2" >
<div title='ชื่อวิชา'><input type="text" name="s_name2" id="s_name2"/>รหัสวิชา2</div>
</li>
</ul>
</td>
<td>
<form method="post" action="">
</table>
<p class="bt" >
<input value="ส่งข้อมูล" type="submit">
<input value="Reset" type="reset">
</p>
</form>
<form method="post" action="11111.php">
<table width="660" border="1" align="center"><!-- ตารางที่ 2 -->
<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>แก้ตรงนี้ให้แสดงชื่ออาจารย์</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="30" 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>
<input type="text" name="box1" id="box1"/>
<input type="text" name="box2" id="box2"/>
<input name="test" type="submit" value="Submit">
</tr>
</table> <!-- จบตารางเล็กที่ 2 -->
</form>
</td><!-- จบตารางใหญ่ -->
</tr>
</table>
</div>
</body>
</html>
ผมต้องการเก็บค่าจาก draggable ที่จะมีค่ารหัสวิชาอยู่ มาไว้ใน textbox แบบ hidden และเก็บค่า "เวลา" ที่ draggable ถูกลากมาวางทับบน droppable เพื่อจะนำ 2 ค่าที่ได้นี้ไปเขียนลงใน database ต่อไปครับ ผมต้องทำยังไงมั้งครับ เพื่อให้รู้ว่า draggable ตัวไหนทับ droppable ตัวไหนอยู่
Tag : HTML/CSS, JavaScript, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2012-10-11 01:52:46 |
By :
akumajoker |
View :
1359 |
Reply :
5 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
คือมัน ไม่รู้ว่ารับค่าจาก draggable ตัวไหนครับ รบกวนชี้แนะด้วยครับ
|
| |
|
|
| |
| Date :
2012-10-23 21:13:06 |
By :
akumajoker |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คุณอาจจะต้องนั่งไล่ดูซะพักครับ
|
| |
|
|
| |
| Date :
2012-10-24 08:36:26 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอนนี้ผมทำได้แล้วครับ แต่อยากถามอีกอย่างนึงครับ
Code (PHP)
echo $_SESSION["n2_mon_p6"]."$i$a mon<br>"; // สามารถแสดงผลได้
for ($i=1;$i<12;$i++) // จำนวนอาจารย์ที่สอน
{
for ($a=1;$a<8;$a++) // จำนวนวิชาที่มีสอน
{
echo $_SESSION['n$i_mon_p$a']."$i$a mon<br>"; // ไม่สามารถแสดงผลได้
echo $_SESSION['n$i_tue_p$a']."$i$a tue<br>";
echo $_SESSION['n$i_wed_p$a']."$i$a wed<br>";
echo $_SESSION['n$i_thu_p$a']."$i$a thu<br>";
echo $_SESSION['n$i_fri_p$a']."$i$a fri<br>";
}
}
มันไม่แสดงผลครับ รบกวนบอกด้วยครับว่า จะทำให้แสดงผลที่ อยู่ใน loop ยังไงครับ
|
| |
|
|
| |
| Date :
2012-10-25 23:47:47 |
By :
akumajoker |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คุณเรียกอะไรแบบนั้นครับ ลองใช้
print_r($_SESSION);
|
| |
|
|
| |
| Date :
2012-10-26 09:09:25 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
Quote:
