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

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

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

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

https://www.ninenik.com/content.php?arti_id=150 via @ninenik

Ninenik 29-05-2014 13:20:30

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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 29-05-2014

ความคิดเห็นที่ 2

sdfsdfsdfdsfgdgdfgdf

kittiwat 31-05-2014 10:48

ความคิดเห็นที่ 3

werwaerwr

kittiwat 31-05-2014 10:49

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน