热门文章
 当前位置：技术文章 > 编程笔记 >

jquery实现可拖拽弹出层特效

本文向大家介绍jquery实现可拖拽弹出层特效，包括了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>