基于JQuery 改造bootstrap模态框拖动功能

看不爽现有的bootstrap拖动实现，自己也手痒，就自己写了一个拖动处理。

PS：其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.htm 供参考

JQuery版本1.7.2

Bootstrap版本3.3.4

html代码（就是普通的模态框代码）

<div class="modal fade" id="modalID"  tabindex="-1" role="dialog" aria-labelledby="myModal"  aria-hidden="true" ><div class="modal-dialog"><div class="modal-content"><form method="POST" id="" action="" onSubmit=""><div class="modal-header popup_box_head_style"><button type="button" class="close popup_box_close_style" style="color:white"data-dismiss="modal" aria-hidden="true">×</button><div class="modal-footer popup_box_footer_style" style="text-align:center"><button type="button" class="btn btn-default btn-lg" style="background-color:#4497f8;color:white;border:1px solid #4497f8"data-dismiss="modal">关闭</button></div></form></div></div>
</div>

Js代码

/** 拖拽模态框*/var mouseStartPoint = {"left":0,"top":  0};var mouseEndPoint = {"left":0,"top":  0};var mouseDragDown = false;var oldP = {"left":0,"top":  0};var moveTartet ;$(document).ready(function(){$(document).on("mousedown",".modal-header",function(e){if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框return;mouseDragDown = true;moveTartet = $(this).parent();mouseStartPoint = {"left":e.clientX,"top":  e.clientY};oldP = moveTartet.offset();});$(document).on("mouseup",function(e){mouseDragDown = false;moveTartet = undefined;mouseStartPoint = {"left":0,"top":  0};oldP = {"left":0,"top":  0};});$(document).on("mousemove",function(e){if(!mouseDragDown || moveTartet == undefined)return;var mousX = e.clientX;var mousY = e.clientY;if(mousX < 0)mousX = 0;if(mousY < 0)mousY = 25;mouseEndPoint = {"left":mousX,"top": mousY};var width = moveTartet.width();var height = moveTartet.height();mouseEndPoint.left = mouseEndPoint.left - (mouseStartPoint.left - oldP.left);//移动修正，更平滑mouseEndPoint.top = mouseEndPoint.top - (mouseStartPoint.top - oldP.top);moveTartet.offset(mouseEndPoint);});});

原理：

并没有什么鬼原理，就是简单的数学计算。

基于JQuery 改造bootstrap模态框拖动功能相关推荐

js，e.pageX、pageY模态框拖动
手写模态框拖动功能 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...
Bootstrap 模态框（Modal）
#Bootstrap 模态框(Modal)插件详细讲解 #####第一步: 加载框架: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ...

基于JQuery 改造bootstrap模态框拖动功能

基于JQuery 改造bootstrap模态框拖动功能相关推荐

最新文章

热门文章