拖拽带标题栏的Angular UI模式

在这个plunk我有一个带有标题栏的Angular UI模式。目标是通过拖动标题栏拖动整个模式。标题栏和模态共享（顶部，左侧）位置，因为模态是矩形（我将半径更改为零），但是当我拖动标题栏时，它不起作用。有任何想法吗？拖拽带标题栏的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(){ 
      $('.topbar').draggable({ 
       drag: function(event, ui) { 
         $(".modal-content").offset({ 
             top: ui.position.top, 
             left: ui.position.left}); 
       } 
      }); 

     },10); 

    }; 

});

来源

2016-09-14 ps0604

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

与上面的代码，而不是把 '顶栏' 尝试拖动使 '模式' 可拖动的，只有当它通过点击 '顶栏' 拖。

来源

2016-09-14 12:03:31

这是有效的，唯一的细节是，如果你快速上下拖动光标失去焦点和拖动结束。 – ps0604

拖拽带标题栏的Angular UI模式

回答

相关问题