angularjs $modal支持拖动的开发步骤介绍

自定义$modal的拖动指令，支持弹窗头部拖动。

第一步：添加拖动指令

 进入ui-bootstrap-tpls.js 源码文件，搜索ui.bootstrap.modal，定位到modal指令代码位置，新增指令，代码如下：

 // 自定义拖动
  .directive('modalDrag', ['$document', function($document) {
                return {
                 restrict: 'EA',
                link:function(scope, element, attr) {

                var startX = 0, startY = 0, x = 0, y = 0;
                element= angular.element(document.getElementsByClassName("modal-header")); 
                element.css({
                    position: 'relative',
                    cursor: 'move'
                });

                element.on('mousedown', function(event) {
                    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;
                    angular.element(document.getElementsByClassName("modal-dialog")).css({
                    top: y + 'px',
                    left:  x + 'px'
                    });
                }

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

第二步：添加自定义指令【modal-drag】到【 modal-window 】指令位置处

搜索文件中的 modal-window，将自定义指令绑定到html字符中用于初始化。