angular-ui-bootstrap 可拖拽模态框

实现不管是重叠模态框还是单独模态框都可以单独拖拽指令：

方法一：（弊端：在模态框中的input获取不到焦点）

 1 angular.module('app')
 2 .directive('draggable', function($document){
 3   return function(scope, element, attr) {
 4     var startX = 0, startY = 0, x = 0, y = 0;
 5     element= element.parent().parent(); 
 6     element.css({
 7         position: 'relative',
 8         cursor: 'move'
 9     });
10 
11     element.on('mousedown', function(event) {
12         event.preventDefault();
13         startX = event.pageX - x;
14         startY = event.pageY - y;
15         $document.on('mousemove', mousemove);
16         $document.on('mouseup', mouseup);
17     });
18 
19     function mousemove(event) {
20         y = event.pageY - startY;
21         x = event.pageX - startX;
22         element.css({
23         top: y + 'px',
24         left:  x + 'px'
25         });
26     }
27 
28     function mouseup() {
29         $document.off('mousemove', mousemove);
30         $document.off('mouseup', mouseup);
31     }
32     }; 
33   });

View Code

添加指令到页面：

 1 <div draggable class="modal-header border-bottom">
 2     <button type="button" class="close" ng-click="ok()">&times;</button>
 3     <h4 class="modal-title"> Detail</h4>
 4 </div>
 5 <div class="modal-body relative">
 6 
 7 </div>
 8 <div class="modal-footer">
 9     <button type="submit" class="btn btn-primary">Save</button>
10     <button type="submit" class="btn btn-default">Cancel</button>
11 </div>

View Code

方法二：（推荐使用，适应任何场景）html同方法一

需要添加的js：

<script src="https://files.cnblogs.com/files/bertha-zm/jquery-ui.min.js"></script>

指令如下：

 1 angular.module('app')
 2 .directive('draggable', function($document){
 3   return function(scope, element, attr) {
 4     var startX = 0, startY = 0, x = 0, y = 0;
 5     element= element.parent().parent(); 
 6     element.css({
 7         position: 'relative',
 8         cursor: 'move'
 9     });
10     element.draggable();
11   }; 
12 });

View Code