9

Bu plunk içinde Sürüklenebilir başlık çubuğuna sahip bir Açısal UI modelim var. Çubuğu sürüklediğinizde, tüm modal hareket eder. Sorun şu ki, fareyi nispeten hızlı bir şekilde yukarı ve aşağı hareket ettirirsek, imleç çubuğa odaklanmayı kaybeder ve modal durur. Herhangi bir fikrin nasıl düzeltileceği Başka herhangi bir yöntem de kabul edilir. HTMLSürüklenebilir Açısal UI Modal odağı kaybediyor

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

    }; 

}); 
+0

güncellenen bakın ve çok garip davranır - bu noktada sürükle kaybeder gibi. Kod çok basit, yanlış bir şey olamaz. Şoktayım :( – Mikkel

cevap

7

sorun kullanımını draggable doğru çözmek için. Kapsayıcıyı belirtilen bir öğe tarafından sürüklemek için handle kullanın.

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

Kullanımı: Yerine

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

Ben Plunker koşup Plunker

İlgili konular