Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับการ Drag Item และการแสดงค่าจาก DB ของแต่ละ Item ที่ถูก Drag

สอบถามเกี่ยวกับการ Drag Item และการแสดงค่าจาก DB ของแต่ละ Item ที่ถูก Drag

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

jarainland

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

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

เมื่อเราทำการลาก Item มาไว้ในกล่อง ระบบจะต้องแสดงค่าที่ดึงมาจาก DB ของแต่ละ Item ซึ่งมีค่าตามนี้ Scientific =5 , Artistic = 10 และ Language = 15 ปัญหาคือไม่ว่าเราจะลาก Item อะไรลงไปในอีกกล่องค่าจะแสดงเป็น 5 เสมอ คือค่าของ Scientific ตามรูป

เราต้องการให้เมื่อเราลาก Scientific มา แล้วให้ระบบมันแสดงค่าของ Scientific จาก DB แต่ถ้า ลาก Scientific กับ Artistic เราต้องการให้ระบบดึงทั้งสองค่ามาแล้วเอามาบวกกัน แล้วแสดงเป็นผลลัพธ์จากการคำนวณ Scientific+Artistic ประมาณนี้อะค่ะ ด้านล่างเป็น code ค่ะ ซึ่งเราคิดว่าเราเขียนเงื่อนไขให้มันไม่ถูกต้อง เราไม่รู้ว่าต้องใช่คำสั่งอะไร เพื่อให้มันระบุได้ว่า Item ที่เราลากมากและ Drag ลงในกล่องแล้วคือ Item ไหน ช่วยแนะนำด้วยค่ะ

Code (PHP)

<?php 
	session_start();
	if($_SESSION==NULL){
	echo "<script type='text/javascript'>alert('MUST LOGIN BEFORE')</script>";
	session_destroy();
	
	}
	require_once('DSSEduDBConnect.php');
	mysql_select_db("dss_education");
	
	
	$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 charset="utf-8" />	
	<link rel="stylesheet" href="drag.css" type="text/css" />

</head>
<body>
	<script language="JavaScript">	
	
	function drag(ev) {
		ev.dataTransfer.setData("text", ev.target.id);
	}
	
	function allowDrop(ev) {
    ev.preventDefault();
	}
	
	function drop(ev)
	{	
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
		var x = ev.target.appendChild(document.getElementById(data));
				
		if(data = document.getElementById('sci')){
			var scipoint = document.getElementById('sci').value;
			document.getElementById('cal').innerHTML = "You get"+scipoint;
			
		}
							
		else if(data = document.getElementById('art')){
			var artpoint = document.getElementById('art').value;
			document.getElementById('cal').innerHTML = "You get"+artpoint;
			
		}
		
		else if(data = document.getElementById('eng')){
			var engpoint = document.getElementById('eng').value;
			document.getElementById('cal').innerHTML = "You get"+engpoint;
			
		}
		
		
	}
	</script>

	<form>
	 <ul>		 
		<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)"></div>		
		
		<h1><button id="calculate" onclick="drop(event)">=</button></h1>
		
		<p name="cal" id="cal"></p>
	</form>
</body>
</html>

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

ประวัติการแก้ไข
2016-02-04 16:05:58

Date : 2016-02-04 16:01:55

By : jarainland

View : 980

Reply : 2

No. 1

Chaidhanan

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

ลองดูตัวอย่างครับ
Code (JavaScript)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
#box1 {width: 400px; height: 200px; background-color: #212121; }
ul{list-style: none; padding: 0px;}
li{ display: inline; pading: 5px; background-color: #424242; cursor: pointer; color: white; }
</style>
<script language="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('drop_id').innerHTML = ev.target.id;
	document.getElementById('drag_id').innerHTML = drag_id;
	document.getElementById('target_box').appendChild(document.getElementById(drag_id));
}
function calc(){
	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'));
			total += vl[i];
		}
		document.getElementById('cal').innerHTML = total;
	}
}
</script>
</head>
<body>
<form>
<ul id=source_box >		 
	<li data-draggable="item" align = "center" id="sci" value="15" draggable="true" ondragstart="drag(event)">Scientific</li>	
	<li data-draggable="item" align = "center" id="art" value="20" draggable="true" ondragstart="drag(event)">Artistic</li>		
	<li data-draggable="item" align = "center" id="eng" value="30" 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><button type=button id="calculate" onclick="calc()">=</button></h1>
<p name="cal" id="cal"></p>
</form>
Drag ID = <b id=drag_id></b><br>
Drop ID = <b id=drop_id></b>
</body>
</html>

ประวัติการแก้ไข
2016-02-05 06:55:55
2016-02-05 07:03:38
2016-02-05 07:05:26

Date : 2016-02-05 06:53:20

By : Chaidhanan

No. 2

jarainland

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

ขอบคุณมากนะคะ

Date : 2016-02-05 12:22:43

By : jarainland

ค้นหาข้อมูล

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

Re : สอบถามเกี่ยวกับการ Drag Item และการแสดงค่าจาก DB ของแต่ละ Item ที่ถูก Drag

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 05