1、正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果。

$(".modal .modal-header").mousedown(function(e) {
var isDrag = false;//是否可以拖拽
var ev = e || window.event;
var ol = $(this).offset().left;//盒子最左边 距离 窗口最左边 的距离
var ot = $(this).offset().top;
var l = $(this).parent().css("left");
var t = $(this).parent().css("top");
deltaX = ev.pageX - parseInt(l);//鼠标 距离 盒子最左边 的距离
deltaY = ev.pageY - parseInt(t);
isDrag = true;
var _this = $(this).parent();
$(document).mousemove(function(e) {
var ev = e || window.event;
if (isDrag) {
moveL = ev.pageX - deltaX;
moveT = ev.pageY - deltaY;
_this.css({
"left": moveL,
"top": moveT
});
}
});
$(document).mouseup(function() {
isDrag = false;
});
});

当然,没有做限定,想怎么脱就怎么脱,,,哦不,是拖、、、拖,不是你想的那样的,好吧,就是你想的那样。

bootstrap模态框实现相对定位拖拽的更多相关文章

  1. JavaScript:bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  2. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  3. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  4. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  5. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  6. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  7. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  8. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  9. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

随机推荐

  1. 搭建 docker + nginx + keepalived 实现Web应用的高可用(亲测)

    1. 环境准备     下载 VMware : https://www.vmware.com/go/getplayer-win        下载 Centos : https://mirrors.a ...

  2. php文件下载方法收藏(附js下载技巧)

    function down($url){ header('Content-Description: File Transfer'); header('Content-Type: application ...

  3. c#几种数据库的大数据批量插入(SqlServer、Oracle、SQLite和MySql)

    这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...

  4. PHP常用人工智能库

    1.NLPTools(http://php-nlp-tools.com/)NLPTools是一个PHP自然语言处理库.能进行文本分级,聚类等操作.2.Prediction Builder(https: ...

  5. Python之freshman02

    内置方法:https://docs.python.org/3/library/functions.html?highlight=built#abs 一.数学运算 1.abs()-取绝对值 2.divm ...

  6. mysql 查询库中有几张表

    SELECT COUNT(*) TABLES, table_schemaFROM information_schema.TABLESWHERE table_schema = '999*999' 999 ...

  7. kotlin 注意的地方

    1 . kotlin let 用法: let(val -> ) 注意:这  -> 后面不能有 花括号!!!! 2 . kotlin 中 如果使用了 @Transactional 注解.请让 ...

  8. C++_标准模板库STL概念介绍1-建立感性认知

    标准模板库的英文缩写是STL,即Standard Template Library. STL里面有什么呢? 它提供了一组表示容器.迭代器.函数对象和算法的模板. 容器是一个与数组类似的单元,可以存储若 ...

  9. Java执行操作系统命令

    从网上学来的方法,sample: try { String[] cmd = new String[] { System.getenv("HOMEPATH") + "/te ...

  10. 下厨房---map/字符串查询

    题目描述 牛牛想尝试一些新的料理,每个料理需要一些不同的材料,问完成所有的料理需要准备多少种不同的材料. 输入描述: 每个输入包含 1 个测试用例.每个测试用例的第 i 行,表示完成第 i 件料理需要 ...