<!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. kvm在线磁盘扩展

    1,查看指定kvm虚拟机的现有磁盘domblklist

  2. 使用border-image实现类似iOS7的1px底边

    使用border-image实现类似iOS7的1px底边 iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的. 首先,来看下面iOS设置的截图中的bord ...

  3. mysql的查询缓存

        查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的 SQL语句后, 执行这条SQL语句,然后将查询到的结果返回给客户端 ...

  4. sqlite学习笔记4：表的创建和删除

    前面做了那么多不就是为了数据弄几张表么.接下来看看怎么新建表. 一 新建表 基本的语法例如以下: CREATE TABLE database_name.table_name( column1 data ...

  5. javaScript操作select

    注意:Option中的O是要大写的,不然语法报错 1.动态创建select       function createSelect(){ var mySelect = document.createE ...

  6. <转>机器学习笔记之奇异值分解的几何解释与简单应用

    看到的一篇比较好的关于SVD几何解释与简单应用的文章,其实是有中文译本的,但是翻译的太烂,还不如直接看英文原文的.课本上学的往往是知其然不知其所以然,希望这篇文能为所有初学svd的童鞋提供些直观的认识 ...

  7. SQL语言整理归纳

  8. SSH框架的简化

    ---恢复内容开始--- 一.简易化的SSH框架,如图: SSH框架的搭建,我就不多说了. 二.简易的ssh框架的步骤: 1.重新编写applicationContext.xmlwen文件 <一 ...

  9. new,delete,malloc,free

    malloc/free是C语言中的内存申请和释放函数,利用它们可方便地管理内存.而在C++中我们又有了新的工具:new/delete.new/delete在管理内存的同时会调用类的构造函数和析构函数, ...

  10. perl正则表达式第二周笔记

    1.使用正则表达式修改文本 1.使用正则表达式修改文本 正则表达式的功能不只有查询,还可以对文本进行修改,例如替换 $var=~m/regex/i $var=~s/regex/replacement/ ...