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(){
          $('.modal-content').draggable({
            drag: function( event, ui ) {
              if(event.toElement.className.indexOf("topbar") == -1 ) return false;
            }
          });               
        },10);

    };

});

Answer 1

要解决此问题，请正确使用draggable。要按指定元素拖动容器，请使用handle。

而不是：

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

使用：

$('.modal-content').draggable({ handle: ".topbar" });

查看更新的Plunker

可拖动的角度UI模式失去焦点

1 个答案: