JQuery 改造bootstrap模态框拖动功能

jQuery版本1.7.2

Bootstrap版本3.3.4

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

1. <div class="modal fade" id="modalID"  tabindex="-1" role="dialog"   
2.     aria-labelledby="myModal"  aria-hidden="true" >  
3.     <div class="modal-dialog">  
4.         <div class="modal-content">  
5.             <form method="POST" id="" action="" onSubmit="">  
6.                 <div class="modal-header popup_box_head_style">  
7.                     <button type="button" class="close popup_box_close_style" style="color:white"  
8.                     data-dismiss="modal" aria-hidden="true">  
9.                       ×  
10.                     </button>  
11.                  <div class="modal-footer popup_box_footer_style" style="text-align:center">  
12.                    <button type="button" class="btn btn-default btn-lg" style="background-color:#4497f8;color:white;border:1px solid #4497f8"  
13.                         data-dismiss="modal">关闭  
14.                     </button>  
15.             </div>  
16.             </form>  
17.         </div>  
18.     </div>  
19. </div>              

Js代码

1. /** 拖拽模态框*/  
2.         var mouseStartPoint = {"left":0,"top":  0};  
3.         var mouseEndPoint = {"left":0,"top":  0};  
4.         var mouseDragDown = false;  
5.         var oldP = {"left":0,"top":  0};  
6.         var moveTartet ;  
7.         $(document).ready(function(){  
8.             $(document).on("mousedown",".modal-header",function(e){  
9.                 if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框  
10.                     return;  
11.                 mouseDragDown = true;  
12.                 moveTartet = $(this).parent();  
13.                 mouseStartPoint = {"left":e.clientX,"top":  e.clientY};  
14.                 oldP = moveTartet.offset();  
15.             });  
16.             $(document).on("mouseup",function(e){  
17.                 mouseDragDown = false;  
18.                 moveTartet = undefined;  
19.                 mouseStartPoint = {"left":0,"top":  0};  
20.                 oldP = {"left":0,"top":  0};  
21.             });  
22.             $(document).on("mousemove",function(e){  
23.                 if(!mouseDragDown || moveTartet == undefined)return;  
24.                 var mousX = e.clientX;  
25.                 var mousY = e.clientY;  
26.                 if(mousX < 0)mousX = 0;  
27.                 if(mousY < 0)mousY = 25;  
28.                 mouseEndPoint = {"left":mousX,"top": mousY};  
29.                 var width = moveTartet.width();  
30.                 var height = moveTartet.height();  
31.                 mouseEndPoint.left = mouseEndPoint.left - (mouseStartPoint.left - oldP.left);//移动修正，更平滑  
32.                 mouseEndPoint.top = mouseEndPoint.top - (mouseStartPoint.top - oldP.top);  
33.                 moveTartet.offset(mouseEndPoint);  
34.             });  
35.         });