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

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
plugin php jquery drag and drop

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ plugin php jquery drag and drop



Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(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(){		
					$(this).css("opacity",1);
					$(this).unbind("mousemove");		
				});					
			});
		});
	}	
	
// การใช้งาน กำหนด selector วัตถุที่ต้องการ
// ในตัวอย่างคือ div ที่มี id เท่ากับ myblock			
drag_me("div#myblock");
});
</script>

CSS และ HTML Code

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

<div id="myblock">

</div>

ตัวอย่างผลลัพธ์

คลิกค้างแล้วลากไปตามตำแหน่งที่ต้องการ





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











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