<!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弹出层拖拽的更多相关文章

  1. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  6. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  8. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  9. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

随机推荐

  1. javascript数组去重算法-----4（另一种写法）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. hdu1285+hdu2467(拓扑排序)

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  3. linux性能监控三张图

    一.监控 二.测试 三.优化

  4. JS关闭页面无提示

    window.opener=null; window.open('','_self'); window.close();

  5. 使用Spire PDF for .NET将HTML转换成PDF文档

    目录 开发环境说明 Spire PDF for .NET (free edition)体验 资源下载 开发环境说明 Microsoft Visual Studio 2013 Ultimate Edit ...

  6. 字符串分割--Java中String.split()用法

    转载自:http://blog.163.com/zs_note/blog/static/199386112201110804233558/ 在java.lang包中有String.split()方法, ...

  7. hibernate sql查询后对象转换成实体类

    在多表查询的时候使用hibernate的sql查询的时候,一般返回的是object[]数组,或者可以使用  session.createSQLQuery(sql).setResultTransform ...

  8. BZOJ 1812: [Ioi2005]riv( 树形dp )

    树背包, 左儿子右兄弟来表示树, dp(x, y, z)表示结点x, x的子树及x的部分兄弟共建y个伐木场, 离x最近的伐木场是z时的最小代价. 时间复杂度O(N^2*K^2) ----------- ...

  9. jquery选择器结果是数组时需要主要的一个问题

    代码很简单,如下 <div id="div1"> <span>111</span> <span>222</span> & ...

  10. Listview 多个ViewHolder实现

    简单代码示例: package com.edaixi.adapter; import android.content.Context; import android.view.View; import ...