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

Registered : 108,450

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



 

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

 



Topic : 121223



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



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




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

1

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

2

เราต้องการให้เมื่อเราลาก 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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-02-04 16:01:55 By : jarainland View : 553 Reply : 2
 

 

No. 1



โพสกระทู้ ( 8,683 )
บทความ ( 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



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



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


ขอบคุณมากนะคะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-02-05 12:22:43 By : jarainland
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเกี่ยวกับการ Drag Item และการแสดงค่าจาก DB ของแต่ละ Item ที่ถูก Drag
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

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