最近发现web网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind(“mousemove”,function(e){ if(_IsMove==1){ $(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).
在本文中，我们将深入探讨如何使用jQuery实现一个简单的拖拽效果，这将为网页增加出色的交互性，并且兼容所有主流浏览器。我们要理解拖拽功能的基本原理：当用户按下鼠标按钮并移动时，元素应该跟随鼠标移动。当鼠标释放时，拖拽结束。
关键在于使用jQuery的`bind()`函数绑定事件处理器，包括`mousedown`、`mousemove`、`mouseup`和`mouseout`。以下是实现拖拽功能的jQuery代码：
```javascript
jQuery.fn.myDrag = function() {
_IsMove = 0;
_MouseLeft = 0;
_MouseTop = 0;
return $(this)
.bind("mousemove", function(e) {
if (_IsMove == 1) {
$(this).offset({
top: e.pageY - _MouseLeft,
left: e.pageX - _MouseTop
});
}
})
.bind("mousedown", function(e) {
_IsMove = 1;
var offset = $(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
})
.bind("mouseup", function() {
_IsMove = 0;
})
.bind("mouseout", function() {
_IsMove = 0;
});
};
```
在这个自定义函数中，我们定义了一个局部变量`_IsMove`来跟踪是否正在进行拖拽操作。`mousedown`事件触发时，将`_IsMove`设置为1，同时计算当前鼠标相对于元素左上角的偏移量`_MouseLeft`和`_MouseTop`。`mousemove`事件处理程序检查`_IsMove`的状态，如果为1，则更新元素的`offset()`，使其跟随鼠标移动。`mouseup`和`mouseout`事件会将`_IsMove`重置为0，停止拖拽。
HTML部分中，我们需要引入jQuery库和自定义的`fun.js`文件，并应用样式。例如，为可拖动元素设置一个特殊的CSS类，以便为其添加合适的样式和鼠标指针提示：
```html
<!DOCTYPE html>
<html>
<head>
<title>demo.htm</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="myFun.js" type="text/javascript"></script>
<style type="text/css">
.myDiv {
background: #EAEAEA;
width: 100px;
height: 100px;
border: 1px solid;
cursor: pointer;
text-align: center;
line-height: 100px;
}
</style>
<script type="text/javascript">
$(function() {
$("#myDiv").myDrag();
$("#myDiv2").myDrag();
});
</script>
</head>
<body>
<div id="myDiv" class="myDiv">拖拽1</div>
<div id="myDiv2" class="myDiv">拖拽2</div>
</body>
</html>
```
在这个例子中，我们有两个具有类`.myDiv`的`div`元素，它们都可以被拖动。通过调用`$("#myDiv").myDrag();`和`$("#myDiv2").myDrag();`，我们可以为这些元素启用拖拽功能。
这个简单的jQuery拖拽功能通过监听鼠标事件并更新元素的位置，实现了在网页上的动态交互。由于使用了jQuery，它能很好地兼容各种浏览器，为用户提供一致的体验。通过调整CSS样式和JavaScript代码，你可以根据需求定制拖拽效果，例如限制拖动范围、添加动画等，从而进一步提升用户体验。
