jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章，感谢他的分享。

首先我们有一个a标签和一个div，div默认是不显示的，当用户点击时改为显示。

首先做点css，效果如下

然后隐藏div，添加jquery

到此，点击显示就完成了。下面来完成关闭。给关闭span添加了一个鼠标手形的样式。

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>

div的关闭

下面我们来完成另一个任务，就是拖拽

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
}); $('#hd').mousedown(function(event) {
// alert(444);
var isMove = true;
var abs_x = event.pageX - $('div#box').offset().left;
var abs_y = event.pageY - $('div#box').offset().top;
// alert(abs_x);
// alert(event.pageX);
$(document).mousemove(function(event) {
// alert(555);
if (isMove) {
var obj = $('div#box');
// alert(obj);
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
};
}).mouseup(function(event) {
isMove = false;
});;
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>