jQuerydiv元素拖动效果代码实例
本章节分享一段代码实例，它实现了元素的拖动效果。
代码非常的简单，有这方面需求的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#Drigging {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var bool=false;
var offsetX=0;
var offsetY=0;
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
})
$("#Drigging").mousedown(function(event){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
}).mouseup(function(){
bool=false;
})
$(document).mousemove(function(event){
if(!bool)
return;
var x = event.clientX-offsetX;
var y = event.clientY-offsetY;
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
</head>
<body>
<div id="Drigging" style="float:left"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var bool=false，设置一个标识符，用来说明元素是否可以拖动。
（3）.var offsetX=0，声明一个变量并赋值为0，用法后面介绍。
（4）.var offsetY=0，同上。
（5）.$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
})，为元素注册mouseover事件处理函数，当鼠标悬浮的时候鼠标指针编程带有四个箭头的那种形状。
（6）.$("#Drigging").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
})，为元素注册mousedown事件处理函数，也就是当鼠标在元素中按下的时候触发。
bool=true，将bool的值设置为true，也就是元素可以拖动。
（7）.offsetX = event.offsetX，获取事件触发时候鼠标指针在元素中的横坐标。
（8）.offsetY = event.offsetY，和上面同理，获取纵向坐标。
（9）.$(this).css('cursor','move')，设置鼠标指针为带有四个箭头的那种形状。
（10）..mouseup(function(){
bool=false;
})，注册mouseup事件处理函数，也就是当鼠标案件松开的时候，将bool设置为false，也就是不可拖动。
（11）.$(document).mousemove(function(){})，为document对象注册mousemove事件处理函数。
（12）.if(!bool) return，如果bool为false，那么直接跳出函数，也就是不可以拖动。
（13）.var x = event.clientX-offsetX，获取元素左边缘距离浏览器客户区左边缘的尺寸。
（14）.var y = event.clientY-offsetY,后去元素上边缘距离浏览器客户区上边缘的尺寸。
（15）.$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
设置相关的样式，因为是绝对定位，所以就实现了拖动效果。
二.相关阅读:
（1）.mouseover事件可以参阅jQuery mouseover 事件一章节。
（2）.css()方法可以参阅jQuery css()一章节。
（3）.mousedown事件可以参阅jQuery mousedown 事件一章节。
（4）.mouseup事件可以参阅jQuery mouseup 事件一章节。
（5）.mousemove事件可以参阅jQuery mousemove 事件一章节。
（6）.clientX可以参阅javascript clientX一章节。
（7）.offsetX属性可以参阅javascript offsetX一章节。