 
<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<!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>拖動DIV</title> 
<style type="text/css"> 
.show{ 
background:#7cd2f8; 
width:100px; 
height:100px; 
text-align:center; 
position:absolute; 
z-index:1; 
left:100px; 
top:100px; 
} 

</style> 
<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> 
<script type="text/javascript"><!-- 
$(document).ready(function() 
{ 
$(".show").mousedown(function(e)//e鼠標事件 
{ 
$(this).css("cursor","move");//改變鼠標指針的形狀 

var offset = $(this).offset();//DIV在頁面的位置 
var x = e.pageX - offset.left;//獲得鼠標指針離DIV元素左邊界的距離 
var y = e.pageY - offset.top;//獲得鼠標指針離DIV元素上邊界的距離 
$(document).bind("mousemove",function(ev)//綁定鼠標的移動事件，因為光標在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
{ 
$(".show").stop();//加上這個之后 

var _x = ev.pageX - x;//獲得X軸方向移動的值 
var _y = ev.pageY - y;//獲得Y軸方向移動的值 

$(".show").animate({left:_x+"px",top:_y+"px"},10); 
}); 

}); 

$(document).mouseup(function() 
{ 
$(".show").css("cursor","default"); 
$(this).unbind("mousemove"); 
}) 
}) 

// --></script> 
</head> 
<body> 
<div class="show"> 
jquery實現(xiàn)DIV層拖動 
</div> 
</body> 
</html> 