เพิ่มเติม สร้าง Drag and Drop วัตถุด้วย jQuery

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เพิ่มเติม สร้าง Drag and Drop วัตถุด้วย jQuery

เพิ่มเติม สร้าง Drag and Drop วัตถุด้วย jQuery
สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย 


Ninenik 124.122.249.xxx 29-05-2014 13:20:30

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ตัวอย่างโค้ด การใช้ cookie ร่วมกับ php ในการจำค่า drag and drop 
การประยุกต์ที่มากกว่า ต้องอาศัยความรู้เพิ่มเติม 

<!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> </title>
<style type="text/css">
div#myblock{
	position:relative;
	width:150px;height:150px;
	display:block;
	background-color:#FF9966;
	border:#6699CC 1px solid;
	cursor:move;
}
</style>
</head>

<body>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />


<div id="myblock" <?php if(isset($_COOKIE['posx'])){?> style="left:<?=$_COOKIE['posx']?>px;top:<?=$_COOKIE['posy']?>px;" <?php } ?>>

</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript">
function set_cookie(cname,action,val){
	var date = new Date();  
	if(action==1){
		var days=1; // กำหนดจำนวนวันที่ต้องการให้จำค่า  
		date.setTime(date.getTime() (days*24*60*60*1000));  		
	}else{
		date.setTime(date.getTime()*-1);  	
	}
	var expires = "; expires="+date.toGMTString();  					
	document.cookie = cname+"=" +val+ "; expires=" + expires + "; path=/";    			
}
$(function(){
	function drag_me(name){
		$(name).css({
			position:"absolute",
			cursor:"move"
		});
		$(name).mousedown(function(event){
			var locateX=event.pageX;
			var locateY=event.pageY;	
			var obj_locateX=$(this).offset().left;
			var obj_locateY=$(this).offset().top;		
			var diff_x=locateX-obj_locateX;	
			var diff_y=locateY-obj_locateY;			
			$(this).css("opacity",0.3).mousemove(function(event){
				locateX=event.pageX;
				locateY=event.pageY;	
				obj_locateX=$(this).offset().left;
				obj_locateY=$(this).offset().top;				
				new_locateX=locateX-diff_x;;		
				new_locateY=locateY-diff_y;							
				$(this).css({
					left:new_locateX,
					top:new_locateY
				}).bind("mouseup mouseout",function(){		
					set_cookie("posx",1,new_locateX);
					set_cookie("posy",1,new_locateY);
					$(this).css("opacity",1);
					$(this).unbind("mousemove");		
				});					
			});
		});
	}	
	
// การใช้งาน กำหนด selector วัตถุที่ต้องการ
// ในตัวอย่างคือ div ที่มี id เท่ากับ myblock			
drag_me("div#myblock");
});
</script>


</body>
</html>


ninenik 124.122.249.xxx 29-05-2014
 ความคิดเห็นที่ 2
sdfsdfsdfdsfgdgdfgdfsad


kittiwat 1.2.198.xxx 31-05-2014 10:48
 ความคิดเห็นที่ 3
werwaerwr


kittiwat 1.2.198.xxx 31-05-2014 10:49
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ