Question

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

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;
  }
});

尝试使用上面的代码而不是制作＆＃39; topbar＆＃39; draggable使'模态＆＃39;只有在通过单击“顶部栏”拖动时才可拖动。

使用标题栏拖动Angular UI模式

1 个答案: