拖动 Angular UI 带有标题栏的模态

Question

在这个 plunk 中，我有一个带有标题栏的 Angular UI 模式。 objective是通过拖动标题栏来拖动整个模态框。标题栏和模态框共享 (top,left) 位置，因为模态框是一个矩形（我将半径更改为零），但是当我拖动标题栏时它不起作用。有什么想法吗？

HTML

  <body ng-app="app" ng-controller="ctl">

  <script type="text/ng-template" id="myModalContent.html">
        <div class="topbar">This is the title</div>

        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>


        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

   </body>

Javascript

var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal,$timeout) {


  var modalInstance;
  $scope.open = function () {
    modalInstance = $uibModal.open({
          animation: false,
          windowClass: 'the-modal',
          templateUrl: 'myModalContent.html'
        });

        $timeout(function(){
            $('.topbar').draggable({
                drag: function( event, ui ) {
                        $( ".modal-content" ).offset({ 
                                        top: ui.position.top,
                                        left: ui.position.left});
                }   
            });

        },10);

    };

});

Answer 1

$('.modal-content').draggable({
  drag: function( event, ui ) {
    if(event.toElement.className.indexOf("topbar") == -1 ) return false;
  }
});

尝试使用上面的代码，而不是使 'topbar' 可拖动，使 'modal' 仅在通过单击 'topbar' 拖动时才可拖动。

拖动 Angular UI 带有标题栏的模态

Dragging Angular UI modal with title bar

angularjs

angular-ui

angular-ui-bootstrap