基于jquery-ui及bootstrap的可拖拽模态框
可直接使用代码
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>model</title>
7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
8 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
9 <!-- 完成拖拽功能 -->
10 <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
11 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
12 </head>
13
14 <body>
15 <div class="container-fluid">
16 <center>
17 <h1>可拖拽的模态框</h1>
18 <button class="btn btn-primary" >
19 <i class="glyphicon glyphicon-floppy-disk"></i> click
20 </button>
21 </center>
22 <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
23 <div class="modal-dialog" role="document">
24 <div class="modal-content">
25 <div class="modal-header">
26 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
27 <h4 class="modal-title" ></h4>
28 </div>
29 <div class="modal-body">
30
31 <div class="form-group">
32 <label for="txt_departmentname">部门名称</label>
33 <input type="text" name="txt_departmentname" class="form-control" placeholder="部门名称">
34 </div>
35 <div class="form-group">
36 <label for="txt_parentdepartment">上级部门</label>
37 <input type="text" name="txt_parentdepartment" class="form-control" placeholder="上级部门">
38 </div>
39 <div class="form-group">
40 <label for="txt_departmentlevel">部门级别</label>
41 <input type="text" name="txt_departmentlevel" class="form-control" placeholder="部门级别">
42 </div>
43 <div class="form-group">
44 <label for="txt_statu">描述</label>
45 <input type="text" name="txt_statu" class="form-control" placeholder="状态">
46 </div>
47 </div>
48 <div class="modal-footer">
49 <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i> 关闭</button>
50 <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> 保存</button>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 <script type="text/javascript">
57 //注册新增按钮的事件
58 $("#click").click(function() {
59 $("#myModalLabel").text("新增");
60 $(\'#myModal\').modal();
61 });
62 // 无按钮时自动加载
63 //$(\'#myModal\').modal();
64
65 // 在模态框出现后添加可拖拽功能
66 $(document).on("show.bs.modal", ".modal", function() {
67 $(this).draggable({
68 handle: ".modal-header", // 只能点击头部拖动
69 cursor: "crosshair"
70 });
71 $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
72 });
73 </script>
74 </body>
75
76 </html>可拖拽模态框，不能控制拖拽范围，使用 containment:"window" 之后连拖拽都不行了，有知道的小伙伴烦请告知一下，谢谢！