drag.html

<!DOCTYPE html> 
<html> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>简单拖曵原理实例</title> 
		<style type="text/css"> 
			#drag{
				width:400px;
				height:300px;
				background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);
				cursor:move;
				position:absolute;
				top:100px;left:100px;
				border:solid 1px #ccc;
			} 
			h2{
				color:#fff;
				background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);
				color:#FFFFFF;
				height:40px;
				line-height:40px;
				margin:0;
			} 
		</style> 
		<script src="jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>		
	</head> 
	
	<body> 
		<div id="drag"> 
			<h2>来拖动我啊</h2> 
		</div> 
	</body> 
</html> 

<script type="text/javascript"> 
	
	$(function(){ 
		/*--------------拖曳效果---------------- 
		*原理：标记拖曳状态dragging ,坐标位置iX, iY 
		* mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获} 
		* mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值} 
		* mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡} 
		*/ 
		var dragging = false; 
		var iX, iY; 
		$("#drag").mousedown(function(e) { 
			dragging = true; 
			iX = e.clientX - this.offsetLeft; 
			iY = e.clientY - this.offsetTop; 
			this.setCapture && this.setCapture(); 
			return false; 
		});
		
		document.onmousemove = function(e) { 
			if (dragging) { 
				var e = e || window.event; 
				var oX = e.clientX - iX; 
				var oY = e.clientY - iY;
				if(oX <= 0){
					oX = 0;
				}
				if(oX >= 700){
					oX = 700;
				}
				if(oY <= 0){
					oY = 0;
				}
				if(oY >= 400){
					oY = 400;
				}
				$("#drag").css({"left":oX + "px", "top":oY + "px"}); 
				return false; 
			} 
		}; 
		
		$(document).mouseup(function(e) { 
			dragging = false; 
			$("#drag")[0].releaseCapture(); 
			e.cancelBubble = true; 
		}) 
		
	}) 
		
</script> 