angular-ui-bootstrap 可拖拽模态框

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

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

angular.module('app')
.directive('draggable', function($document){
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
    element= element.parent().parent(); 
    element.css({
        position: 'relative',
        cursor: 'move'
    });

    element.on('mousedown', function(event) {
        event.preventDefault();
        startX = event.pageX - x;
        startY = event.pageY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
        y = event.pageY - startY;
        x = event.pageX - startX;
        element.css({
        top: y + 'px',
        left:  x + 'px'
        });
    }

    function mouseup() {
        $document.off('mousemove', mousemove);
        $document.off('mouseup', mouseup);
    }
    }; 
  });

添加指令到页面：

<div draggable class="modal-header border-bottom">
    <button type="button" class="close" ng-click="ok()">&times;</button>
    <h4 class="modal-title"> Detail</h4>
</div>
<div class="modal-body relative">

</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="submit" class="btn btn-default">Cancel</button>
</div>

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

需要添加的js：

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

指令如下：

angular.module('app')
.directive('draggable', function($document){
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
    element= element.parent().parent(); 
    element.css({
        position: 'relative',
        cursor: 'move'
    });
    element.draggable();
  }; 
});