ドラッグ可能な角度UIモーダルがフォーカスを失う

このplunkにはドラッグ可能なタイトルバーを持つ角度UIのモーダルがあります。バーをドラッグすると、モーダル全体が移動します。問題は、マウスを比較的速く上下に動かすと、カーソルがバーにフォーカスを失い、モーダルが動くのを止めるということです。任意のアイデアをどのようにこれを修正するには？他の方法も歓迎します。 Javascriptをドラッグ可能な角度UIモーダルがフォーカスを失う

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を解決するために

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>

。指定された要素でコンテナをドラッグするには、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モーダルがフォーカスを失う

答えて

関連する問題