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

<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>

/** 拖拽模态框*/
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);
});
});