PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

เพิ่มเติม สร้าง Drag and Drop วัตถุด้วย jQuery
สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=150 via @ninenik


โดย:  Ninenik IP: 124.122.249.xxx วันที่: 29-05-2014 เวลา: 13:20:30

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3
werwaerwr


โดย:  Kittiwat IP: 1.2.198.xxx วันที่: 31-05-2014 เวลา: 10:49:22
 ความคิดเห็นที่ 2
sdfsdfsdfdsfgdgdfgdfsad

โดย:  Kittiwat IP: 1.2.198.xxx วันที่: 31-05-2014 เวลา: 10:48:44
 ความคิดเห็นที่ 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 IP: 124.122.249.xxx วันที่: 29-05-2014