本文实例讲述了jQuery实现的简单拖动层。分享给大家供大家参考，具体如下：
运行效果图如下：
完整代码如下：
<!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" />
在本文中，我们将深入探讨如何使用jQuery实现一个简单的拖动层功能。拖动层是一种常见的交互元素，允许用户通过鼠标操作来改变元素在页面上的位置。这个实例将展示如何使用jQuery的基本事件处理函数来实现这一功能。
我们来看一下运行效果图。在实际的网页中，用户将看到一个带有背景颜色的矩形框（#a），当鼠标按下时，用户可以拖动该矩形框在页面上自由移动。此外，还有一个矩形框（#b）用于显示鼠标当前位置的坐标，这有助于我们理解拖动过程中的坐标变化。
以下是实现这个功能的完整HTML和JavaScript代码：
```html
<!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" />
<script src="jquery-1.4.2.min.js" language="javascript"></script>
<title>无标题文档</title>
</head>
<body>
<div id="a" style="width:300px; height:300px; background-color:#069; position:absolute;">按下鼠标即可拖动</div>
<div id="b"></div>
<script language="javascript">
$(function(){
var x;
var y;
var top;
var left;
var clix;
var cliy;
var pd;
var fx;
var fy;
$("#a").mousedown(function(f){
pd = true;
if(!f){ f = window.event; }
fx = f.clientX;
fy = f.clientY;
top = $(this).offset().top;
left = $(this).offset().left;
});
$("#a").mousemove(function(e){
if(!e){ e = window.event; }
clix = e.clientX;
cliy = e.clientY;
if(pd === true){
$(this).css({'top': top + (cliy - fy), 'left': left + (clix - fx)});
}
$("#b").text(e.clientX + ' ' + e.clientY);
});
$("#a").mouseup(function(){
pd = false;
});
})
</script>
</body>
</html>
```
在这个代码中，主要使用了jQuery的几个关键方法：
1. `mousedown`：当鼠标按键被按下时触发。在这个事件处理器中，我们初始化一些变量，如`fx`和`fy`记录鼠标按下的位置，以及`top`和`left`记录元素初始位置。
2. `mousemove`：当鼠标在元素上移动时触发。如果鼠标按键仍然按下（`pd`为真），则计算当前鼠标位置与按下位置的差值，并更新元素的`top`和`left`样式，从而实现拖动效果。同时，`#b`元素会显示当前鼠标的坐标。
3. `mouseup`：当鼠标按键被释放时触发。这用于关闭拖动状态，即设置`pd`为`false`，防止在鼠标未按下时仍进行拖动。
jQuery的选择器是其强大的原因之一，例如`$("#a")`选择了ID为"a"的元素。`offset()`方法用于获取元素相对于文档的偏移量，`css()`方法则用于设置或返回元素的CSS属性。
此外，注意代码中使用`if(!f){ f = window.event; }`来兼容IE浏览器和其他非IE浏览器，因为在IE中，事件对象作为全局对象`window.event`提供，而在其他浏览器中，事件对象作为函数参数传递。
通过这个实例，我们可以了解到jQuery如何简化DOM操作和事件处理，使得创建交互式Web应用变得更加容易。了解并熟练掌握这些基础技能，对于任何jQuery开发者来说都是至关重要的。在实际项目中，可以根据需求进行调整和优化，比如添加边界限制，防止元素超出视口范围，或者添加更复杂的拖动行为。
