jQuery控制Div拖拽效果完整实例分析
本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<style>
#Drigging{
width:200px;
background:#CCC;
border:solid1px#666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<scriptsrc="jquery-1.8.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varbool=false;//标识是否移动元素
varoffsetX=0;//声明DIV在当前窗口的Left值
varoffsetY=0;//声明DIV在当前窗口的Top值
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
//当鼠标移动到拖拽的DIV上的时候，将鼠标的样式设置为移动(move)
})
$("#Drigging").mousedown(function(){
bool=true;
//当鼠标在移动元素按下的时候将bool设定为true
offsetX=event.offsetX;
//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY=event.offsetY;
//获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY
$(this).css('cursor','move');
}).mouseup(function(){
bool=false;
//当鼠标在移动元素起来的时候将bool设定为false
})
$(document).mousemove(function(){
if(!bool)//如果bool为false则返回
return;
//当bool为true的时候执行下面的代码
varx=event.clientX-offsetX;
//event.clientX得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的X值
//（减去鼠标刚开始拖动的时候在当前窗口的偏移X）
vary=event.clientY-offsetY;
//event.clientY得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值
//（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）
$("#Drigging").css("left",x);
$("#Drigging").css("top",y);
$("#Drigging").css('cursor','move');
})
})
</script>
</head>
<body>
<divid="Drigging"style="float:left">
拖拽层
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。