끌기 가능한 각도 UI 모달이 포커스를 잃습니다

이 plunk에는 드래그 가능한 제목 표시 줄이있는 각도 UI 모달이 있습니다. 막대를 끌면 전체 모달이 이동합니다. 문제는 마우스를 상대적으로 빠르게 위아래로 움직이면 커서가 막대에 초점을 잃고 모달이 움직이지 않는다는 것입니다. 어떤 아이디어가 이것을 고치는 방법? 다른 방법도 환영합니다. HTML끌기 가능한 각도 UI 모달이 포커스를 잃습니다

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

자바 스크립트

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

업데이트를 참조하십시오 그것은 매우 이상한 행동 - 그것은 어떤 점에서 드래그를 잃고있다. 코드가 너무 단순해서 잘못 될 수는 없습니다. 내가 곤두박질 친다. ( – 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을 실행 Plunker

출처

2016-09-20 19:38:55

끌기 가능한 각도 UI 모달이 포커스를 잃습니다

답변

관련 문제