基于jquery-ui及bootstrap的可拖拽模态框

可直接使用代码

 <!DOCTYPE html>
 <html>

     <head>
         <meta charset="UTF-8">
         <title>model</title>
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
         <!-- 完成拖拽功能 -->
         <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     </head>

     <body>
         <div class="container-fluid">
             <center>
                 <h1>可拖拽的模态框</h1>
                 <button class="btn btn-primary" id="click">
                     <i class="glyphicon glyphicon-floppy-disk"></i> click
                 </button>
             </center>
             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                     <div class="modal-content">
                         <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                             <h4 class="modal-title" id="myModalLabel"></h4>
                         </div>
                         <div class="modal-body">

                             <div class="form-group">
                                 <label for="txt_departmentname">部门名称</label>
                                 <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
                             </div>
                             <div class="form-group">
                                 <label for="txt_parentdepartment">上级部门</label>
                                 <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
                             </div>
                             <div class="form-group">
                                 <label for="txt_departmentlevel">部门级别</label>
                                 <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
                             </div>
                             <div class="form-group">
                                 <label for="txt_statu">描述</label>
                                 <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
                             </div>
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i> 关闭</button>
                             <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> 保存</button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <script type="text/javascript">
             //注册新增按钮的事件
             $("#click").click(function() {
                 $("#myModalLabel").text("新增");
                 $('#myModal').modal();
             });
             // 无按钮时自动加载
             //$('#myModal').modal();

             // 在模态框出现后添加可拖拽功能
             $(document).on("show.bs.modal", ".modal", function() {
                 $(this).draggable({
                     handle: ".modal-header", // 只能点击头部拖动
                     cursor: "crosshair"
                 });
                 $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
             });
         </script>
     </body>

 </html>

可拖拽模态框，不能控制拖拽范围，使用 containment:"window" 之后连拖拽都不行了，有知道的小伙伴烦请告知一下，谢谢！