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

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>

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