bootstrap的弹出框，加入jquery-ui后可以拖拽后，但是可以拖出去的解决办法

在引入jquery-ui后可以实现拖拽功能，但是发现可拖到窗口外面去，去网上搜索暂时没有找到解决办法，可能是我还没找到吧，考虑到时间问题，于是自己尝试解决了下：

引入相关的css文件和js文件

<link href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css" rel="stylesheet">

<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>

<!-- 引入jquery-ui.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-ui.js"></script>

html代码片段：

<a href="javascript:void(0);" class="btn btn-success btn-sm" οnclick="addAppInfo()">新增APP基础信息</a>

<!-- 模态框（Modal） -->

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

         <div class="modal-dialog">

                         <div class="modal-content">

                             <div class="modal-header">

                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                                    <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>

                           </div>

                             <div class="modal-body">按下 ESC 按钮退出。</div>

                        <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                        <button type="button" class="btn btn-primary">提交更改</button>

</div>

</div>

<!-- /.modal-content -->

</div><!-- /.modal-dialog -->

</div> <!-- /.modal -->

js代码：

var divOriginalx,divOriginaly,bigx,bigy;

function addAppInfo() {



        $("#addModal").modal({
            show:true,
            backdrop:"static"

        });
    


}

$(function () {
    $("#addModal").draggable({
        handle:".modal-header"
    }).css("overflow","hidden").mousedown(function (ev) {
        $(this).css("cursor","move");
        var event=ev||window.event;
        //记录内容窗口的原始位置
       var divOriginal=$(".modal-content").offset();
       if(typeof divOriginalx=="undefined") {
           divOriginalx=divOriginal.left;
       }
       if(typeof divOriginaly=="undefined"){
           divOriginaly=divOriginal.top;
       }
        //记录模式窗口的原始位置
       var bigOriginal=$("#addModal").offset();
       if(typeof bigx=="undefined"){
           bigx=bigOriginal.left;
       }


       if(typeof bigy=="undefined"){
           bigy=bigOriginal.top;
       }

        $(document).bind("mousemove",function (ev) {
            var event=ev||window.event;
            //计算移动的距离
            var contentDiv2=$(".modal-content").offset();
            var divx2=contentDiv2.left;
            var divy2=contentDiv2.top;
            var b=0;
            //判断左边界，$(".modal-backdrop").width()这个指的是那个背景的宽度，如果用$（window)有点误差
            if(divx2-divOriginalx>=$(".modal-backdrop").width()-divOriginalx-$(".modal-content").width()){
                divx2=$(".modal-backdrop").width()-$(".modal-content").width();

                $("#addModal").get(0).style.left=divx2+"px";
            }
            //判断下边界
            if(divy2-divOriginaly>=$(".modal-backdrop").height()-divOriginaly-$(".modal-content").height()){
                divy2=$(".modal-backdrop").height()-$(".modal-content").height();

                $("#addModal").get(0).style.top=(bigy+$(".modal-backdrop").height()-divOriginaly-$(".modal-content").height())+"px";
            }
            //判断右边界
            if(divx2<=0){
                //这样去赋值，是因为#addModel对应的定位是fixed，而且初始位置相对于视窗是top:0px,left:0px
                $("#addModal").get(0).style.left=-($(".modal-backdrop").width()-$(".modal-content").width())+"px";
            }
            //判断下边界
            if(divy2<=0){
                $("#addModal").get(0).style.top=(bigy-divOriginaly)+"px";
            }

        })
    }).mouseup(function () {
        $(this).css("cursor","default");

    })


})

写到这里的时候发现一个问题，当在次弹出的时候，出现的位置总是在左上角，于是我修改模式窗口的位置：在

addAppInfo（）方法里面进行了修改：

function addAppInfo() {



        $("#addModal").modal({
            show:true,
            backdrop:"static"

        });
      
            // 执行一些动作...
            if(typeof bigy  != "undefined" ){
                $("#addModal").get(0).style.top=bigy+"px";

            }
            if(typeof bigx  != "undefined" ){
                $("#addModal").get(0).style.left=bigx+"px";
            }

    


}

发现没有效果，但是只要我在这个方法里面打个断点，就有效果了，我猜想是不是加载的时机问题，于是做了以下修改：

function addAppInfo() {



        $("#addModal").modal({
            show:true,
            backdrop:"static"

        });
        setTimeout(function () {
            // 执行一些动作...
            if(typeof bigy  != "undefined" ){
                $("#addModal").get(0).style.top=bigy+"px";

            }
            if(typeof bigx  != "undefined" ){
                $("#addModal").get(0).style.left=bigx+"px";
            }

        },150)


}
//将等待 CSS 过渡效果完成后触发，添加这个函数是因为上面只能让模式窗口在中顶部的位置显示，所以加了下面这个函数，你可以去掉这个在去运行就知道了
$('#addModal').on('shown.bs.modal', function () {
    // 执行一些动作...
    if(typeof bigy  != "undefined" ){
        $("#addModal").get(0).style.top=bigy+"px";

    }
    if(typeof bigx  != "undefined" ){
       $("#addModal").get(0).style.left=bigx+"px";
    }


});

由于我还是个初学者，并没加入兼容浏览器的代码，欢迎各位给出优化的办法，对于目前的我只能想到这种笨方法，各位楼主有更好的办法，希望能告诉我，在此感激不尽