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

来源：互联网发布：大数据综合服务平台编辑：程序博客网时间：2024/05/22 02:24

看不爽现有的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);});});

原理：

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

1 0