Draggable Angular UI Modal失去焦点

在这plunk我有一个可拖动标题栏的Angular UI模式。当你拖动栏杆时，整个模态会移动。问题是，如果我相对快速地上下移动鼠标，光标会失去焦点，并且模态停止移动。任何想法如何解决这一问题？任何其他方法也是受欢迎的。Draggable Angular UI Modal失去焦点

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

    }; 

});

来源

2016-09-15 ps0604

我跑上Plunker和它的行为很奇怪 - 就像它失去在某些时候的阻力。代码非常简单，不会有任何问题。我很难过:( – Mikkel

为了解决这个问题，使用draggable正确。要通过指定元素拖动容器，请使用handle。

相反的：

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

用途：

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

见更新Plunker

来源

2016-09-20 19:38:55

Draggable Angular UI Modal失去焦点

回答

相关问题