Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับการอ้างถึงหรือระบุ element ของการ Drag Item เพื่อนำมาใช้เขียนเงื่อนไข

สอบถามเกี่ยวกับการอ้างถึงหรือระบุ element ของการ Drag Item เพื่อนำมาใช้เขียนเงื่อนไข

เริ่มหัวข้อใหม่

jarainland

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

เราออกแบบหน้าเว็บโดยมี Item 3 อันคือ Scientific Artistic และ Language ซึ่งมันสามารถลากมาใส่ในอีกกล่องหลังจากนั้นระบบจะแสดงค่าที่ได้จากการคำนวณ ตามรูป

ในโค้ดด้านล่างจะมีส่วนที่เราใช้ jQuery (ช่วงบรรทัดที่ 69) เพื่อส่งค่าที่ระบบแสดงหลังจากการคำนวณไปที่หน้า php อื่น เพื่อทำการ select ข้อมูลมาแสดงในหน้าเดิมนี้ ทีนี้เราต้องการให้ถ้าเรา Drag Item ที่เป็น Scientific อย่างเดียวก็ให้ระบบส่งค่าไปที่หน้า php อื่น สมมุติให้ชื่อว่า faculty1.php แล้วถ้า Item Scientific กับ Artistic ถูก Drag ก็ให้ส่งข้อมูลไปที่หน้า php อีกหน้านึงสมมุติชื่อหน้าว่า faculty2.php เพราะว่าการดึงข้อมูลมาจาก DB ใน faculty1.php กับ faculty2.php จะมีรายละเอียดไม่เหมือนกัน ขึ้นอยู่กับ Item ที่ถูก Drag มา ประมาณนี้อะค่ะ ทีนี้เราไม่รู้ว่าจะเขียนเงื่อนหรือใช้คำสั่งไหนที่จะระบุได้ว่า Item ที่ถูก drag มามันคือ Scientific นะ หรือ มันคือ Artististic กับ Language นะ ตามโค้ดด้านล่างเลยค่ะ

drag.php
Code (PHP)

<?php 
	session_start();
	if($_SESSION==NULL){
	echo '<script type="text/javascript">'; 
	echo 'alert("MUST LOGIN BEFORE");'; 
	echo 'window.location.href = "Home.php";';
	echo '</script>';
	session_destroy();
	
	}
	require_once('DSSEduDBConnect.php');
	mysql_select_db("dss_education");
	mysql_query("SET NAMES UTF8");
	
	$sql = " SELECT * FROM member WHERE 1";
	$query =  mysql_query($sql,$DSSEduDBConnect) or die(mysqli_error());
	$result = mysql_fetch_array($query);
	while($result['username']!=$_SESSION['username']){
		$result = mysql_fetch_array($query);
	}
	
	$_SESSION['ID'] = $result['memberID'];
	$_SESSION['pass'] = $result['password'];
?>

<!doctype html>
<html lang="en">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" href="drag.css" type="text/css" />

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function drag(ev) {
	ev.dataTransfer.setData("text", ev.target.id);
}
function allowDrop(ev) {
	ev.preventDefault();
}
function drop(ev){	
	ev.preventDefault();
	var drag_id=ev.dataTransfer.getData("text");	
	document.getElementById('target_box').appendChild(document.getElementById(drag_id));	

	var lis = document.getElementById('target_box').childNodes;
	var vl = new Array;
	if( lis.length){
		var total = 0;
		for(var i=0; i<lis.length; i++){
			vl[i] = parseInt(lis[i].getAttribute('value'));
			
			if(i==1){
				x = ((vl[i-1]/2*100)+(vl[i]/2*100));
				total = x/2;
			}	
			else if(i==2){
					x = (vl[0]/2*100)+((vl[i-1]/2*100)+(vl[i]/2*100));
				total = x/3;
				}
			else{
				total = (vl[i]/2)*100;				
			}			
						
		}
		document.getElementById('cal').innerHTML = total+"%";		
	}
}

$(document).ready(function(){
	
	$("#match").click(function(){

			$.post("faculty.php", { 
			data1: $("#cal").val()}, 
				function(result){
					$("#showfac").html(result);
				}
			);

		});
	});

</script>
</head>
<body>
	<form>
		<ul id=source_box>		 
			<li data-draggable="item" align = "center" id="sci" value="<?php echo $result['sciscore']; ?>" draggable="true" ondragstart="drag(event)">Scientific</li>	
			<li data-draggable="item" align = "center" id="art" value="<?php echo $result['artscore']; ?>" draggable="true" ondragstart="drag(event)">Artistic</li>		
			<li data-draggable="item" align = "center" id="eng" value="<?php echo $result['engscore']; ?>" draggable="true" ondragstart="drag(event)">Language</li>
		</ul>	
		<div data-draggable="target" id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
			<ul id=target_box></ul>
		</div>
		<h1><div data-draggable="symbol" align = "center">=</div></h1>
		<output type="text" name="cal" id="cal"></output>
		<div id="btn1"><h1><input type="button" id="match" value="Matching"></input></h1></div>
	</form>		
	<div id="showfac"></div>
</body>
</html>

faculty.php
Code (PHP)

<!doctype html>
<html lang="en">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" href="drag.css" type="text/css" />
</head>
<body>
<form>
	<?php
		require_once('DSSEduDBConnect.php');
		mysql_select_db("dss_education");;
		mysql_query("SET NAMES UTF8");
		
		$sql = "SELECT facultyname FROM faculty where sci <= '".$_POST['data1']."'";
		$objQuery = mysql_query($sql) or die ("Error Query [".$sql."]");
	?>

	<table width="600" align="center" >
	  <tr>
		<th width="91"> <div align="left">Matching</div></th>		
	  </tr>
	<?php
	while($objResult = mysql_fetch_array($objQuery))
	{
	?>
	  <tr>
		<td><div align="left" id="div1"><?php echo $objResult["facultyname"];?></div></td>		
	  </tr>
	<?php
	}
	?>
	</table>
	</form>
</body>
</html>

ไอเดียหลักๆของเราคือ เงื่อนไข where ในไฟล์ faculty.php มันจะแตกต่างกันขึ้นอยู่กับ Item ที่ถูก Drag ในหน้า drag.php อะค่ะ ถ้าใครมีวิธีที่ดีกว่าที่เราบอกไว้ข้างต้นก็แนะนำมาได้เลยนะคะ

Tag : PHP, MySQL, HTML/CSS, JavaScript, Ajax, jQuery

Date : 2016-02-12 22:55:09

By : jarainland

View : 906

Reply : 3

No. 1

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

เอาบันทัดที่ 45 .. 50 มาประยุกต์ใช้ในการตรวจสอบหา id ของ element ครับ

Date : 2016-02-13 08:34:59

By : Chaidhanan

No. 2

jarainland

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

พอจะนึกออกละค่ะ คิดว่าต้องใช้คำสั่งนี้ lis[i].getAttribute('id') แต่ยังไม่รู้จะได้ตามที่ต้องการมั้ย แต่ก็ขอบคุณมากๆๆนะคะ

Date : 2016-02-13 22:34:48

By : jarainland

No. 3

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

กรณีที่เป็น id ใช้ lis[i].id ได้เลยครับ เป็น attribute พิเศษ

Date : 2016-02-13 22:39:03

By : Chaidhanan

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามเกี่ยวกับการอ้างถึงหรือระบุ element ของการ Drag Item เพื่อนำมาใช้เขียนเงื่อนไข

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก