分享一段代码实例，它实现了点击按钮弹出一个层的功能，并且可以使用鼠标拖动层的移动。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.gaodaima.com/" />
<title>搞代码</title>
<style type="text/css">
#show{
width:100px;
height:30px;
line-height:30px;
margin:0px auto;
background-color:red;
}
#dialog{
display:none;
padding:8px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var _move=false;
var _x,_y;
$(document).ready(function(){
$("#show").click(function(event){
var str="搞代码欢迎您";
$("#txt").html(str);
var wid = $(window).width();
var hei = $(window).height();
var left = (wid - 400)/2+"px";
var top = (hei - 200)/2+"px";
$("#dialog").css({
"z-index":"5",
"position":"absolute",
"display":"block",
"width":"400px",
"height":"200px",
"left":left,
"top":top,
"background":"#EEEEEE",
"color":"red",
"border":"1px solid red"
})
})
$("#close").click(function(event){
$("#dialog").slideUp("slow");
})
$("#dialog").mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($("#dialog").css("left"));
_y=e.pageY-parseInt($("#dialog").css("top"));
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$("#dialog").css({top:y,left:x});
}
}).mouseup(function(){
_move=false;
});
});
</script>
</head>
<body>
<div id="show">点击弹出层</div>
<div id="dialog">
<div id="txt"></div>
<br/>
<div style="text-align:right;padding-right:50px;">
<input id='close' type="button" value="关闭此弹出层">
</div>
</div>
</body>
</html>
弹出的层可以进行拖动效果并且在窗口中居中，下面介绍一下实现过程。
一.代码注释：
（1）.var _x,_y，声明两个变量，用来存储坐标值。
（2）.var _move=false，声明一个变量，并赋值为false，用来标识弹出层是否可以拖动。
（3）.$(document).ready(function(){})，文档结构完全加载完毕再去执行函数中的代码。
（4）.$(“#show”).click(function(event){})，为id属性值为show的元素注册click事件处理函数。
（5）.var str=”蚂蚁部落欢迎您”，声明一个字符串作为显示的内容。
（6）.$(“#txt”).html(str)，将字符串写入id属性值为txt的元素中。
（7）.var wid = $(window).width()，获取窗口的宽度。
（8）.var hei = $(window).height()，获取窗口的高度。
（9）.var left = (wid – 400)/2+”px”，设置弹出窗口的left属性值，可以让弹出窗口水平居中。
（10）.var top = (hei – 200)/2+”px”，设置弹出窗口的top属性值，可以让弹出窗口垂直居中。
（11）.$(“#dialog”).css({})，设置弹窗口的一些样式属性。
（12）.$(“#close”).click(function(event){}),为关闭按钮注册click事件处理函数。
（13）.$(“#dialog”).slideUp(“slow”)，将弹出框收起，也就是隐藏弹出框。
（14）.$(“#dialog”).mousedown(function(e){})，为id属性值为dialog的元素注册mousedown事件处理函数。
（15）._move=true，将变量的值设置为true，用以标识弹出窗口是可以拖动的。
（16）._x=e.pageX-parseInt($(“#dialog”).css(“left”))，获取当鼠标按下时，鼠标指针距离弹出窗口左边缘的距离。
（17）._y=e.pageY-parseInt($(“#dialog”).css(“top”))，获取当鼠标按下时，鼠标指针距离弹出窗口上边缘的距离。
（18）.$(document).mousemove(function(e){})，为document对象注册mousemove事件处理函数，之所以要注册在document上而不是弹出层上，这样可以利用事件冒泡现象防止鼠标指针移出弹出层后，导致拖动无效的情况。
（19）.if(_move)，判断是否可以拖动。
（20）.var x=e.pageX-_x，获取拖动过程中弹出层的left属性值。
（21）.var y=e.pageY-_y，获取拖动过程中弹出层的top属性值。
（22）.$(“#dialog”).css({top:y,left:x})，设置left和top属性值。
（23）.mouseup(function(){_move=false;}),为弹出层注册mouseup事件处理函数，当鼠标松开的时候，将_move变量值设置为false，也就是不能够拖动了，当然这里使用是链式调用方式。
转载请注明原文链接：jQuery拖拽的弹出层效果代码实例
