可拖动的 Angular UI 模态失去焦点答案

【问题标题】：Draggable Angular UI Modal loses focus可拖动的 Angular UI 模态失去焦点
【发布时间】：2017-01-23 14:39:36
【问题描述】：

在这个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);

    };

});

【问题讨论】：

我跑上了 Plunker，它的行为非常奇怪——就像它在某个时候失去了阻力。代码很简单，不会有任何问题。我被难住了:(

标签： angularjs jquery-ui angular-ui-bootstrap angular-ui jquery-ui-draggable

【解决方案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

【讨论】：