Draggable Angular UI 模态框失去焦点

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

Draggable Angular UI 模态框失去焦点

Draggable Angular UI Modal loses focus

jquery-ui

jquery-ui-draggable

angularjs

angular-ui

angular-ui-bootstrap