Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Client Script Forum > สอบถามปัญหา การรับค่าจาก droppable จะต้องเขียนโค้ดยังไงครับ



 

สอบถามปัญหา การรับค่าจาก droppable จะต้องเขียนโค้ดยังไงครับ

 



Topic : 085270



โพสกระทู้ ( 7 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



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">&nbsp;&nbsp;&nbsp;
	<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">&nbsp;</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">&nbsp;</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







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-10-11 01:52:46 By : akumajoker View : 1292 Reply : 5
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Quote:
box1.value=test;


เห็นพวกแถว ๆ นี้มันมีการแทนค่าอยู่น่ะครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-12 09:19:39 By : mr.win
 


 

No. 2



โพสกระทู้ ( 7 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

คือมัน ไม่รู้ว่ารับค่าจาก draggable ตัวไหนครับ รบกวนชี้แนะด้วยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-23 21:13:06 By : akumajoker
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

คุณอาจจะต้องนั่งไล่ดูซะพักครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-24 08:36:26 By : mr.win
 


 

No. 4



โพสกระทู้ ( 7 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอนนี้ผมทำได้แล้วครับ แต่อยากถามอีกอย่างนึงครับ

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
 


 

No. 5



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

คุณเรียกอะไรแบบนั้นครับ ลองใช้

print_r($_SESSION);

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-26 09:09:25 By : mr.win
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามปัญหา การรับค่าจาก droppable จะต้องเขียนโค้ดยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่