jquery实现可拖拽弹出层特效
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了
奉上源码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.dragBox
{
width: 400px;
height: 200px;
position: absolute;
top: 40%;
left: 40%;
background: #e8e8e8;
z-index: 8001;
}
.dragBox > div
{
height: 30px;
cursor: move;
background: #00ff21;
position: relative;
}
.ui-mask
{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
z-index: 8000;
opacity: 0.4;
filter: Alpha(opacity=40);
}
</style>
<script src="framework/base/jquery-1.8.3.min.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var mouseOffx = 0;
var mouseOffy = 0;
var isDrag = false;
$(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {
mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;
mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;
isDrag = true;
})
$(document).unbind(".click").on("mousemove", function (ev) {
var mourseX = ev.clientX, mourseY = ev.clientY;
var moveX = 0, moveY = 0;
if (isDrag === true) {
moveX = mourseX - mouseOffx;
moveY = mourseY - mouseOffy;
var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);
var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
$(".dragBox").css({ "left": moveX, "top": moveY });
}
});
$(document).unbind(".click").on("mouseup", function () {
isDrag = false;
});
});
</script>
</head>
<body>
test
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="dragBox">
<div>
</div>
</div>
</body>
</html>
相关文章
这篇文章主要介绍了一款jQuery+PHP+MySQL三者结合实现的二级联动下拉菜单，需要的朋友可以参考下2015-10-10
jquery获取input type=text中的值的各种方式(总结)
下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求，下面我们就来仔细研究下这款jQuery插件的具体使用方法。2015-04-04
这篇文章主要介绍了jquery实现简单合拢与展开网页面板的方法,通过简单的jquery页面元素样式操作实现展开与合拢面板的功能,非常简单实用,需要的朋友可以参考下2015-09-09
jQuery技巧大放送 学习jquery的朋友可以看下，非常不错的整理，推荐。2009-10-10
这篇文章主要介绍了jQuery实现文本框邮箱输入自动补全效果，大家无需输入完全部邮箱信息，感兴趣的小伙伴们可以参考一下2015-11-11
本篇文章主要是对jquery 无限级下拉菜单的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了jQuery实现Div拖动+键盘控制综合效果的方法,实例分析了jQuery操作div块拖动的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
下面小编就为大家带来一篇jquery select2的使用心得(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要为大家详细介绍了jquery.validate表单验证插件使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论