在此plunk我有一个带有可拖动标题栏的 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(){
$('.modal-content').draggable({
drag: function( event, ui ) {
if(event.toElement.className.indexOf("topbar") == -1 ) return false;
}
});
},10);
};
});
最佳答案
要解决该问题，请正确使用draggable。要通过指定元素拖动容器，请使用 handle .
而不是:
$('.modal-content').draggable({
drag: function( event, ui ) {
if(event.toElement.className.indexOf("topbar") == -1 ) return false;
}
});
用途:
$('.modal-content').draggable({ handle: ".topbar" });
查看更新Plunker
关于angularjs - 可拖动的 Angular UI 模态失去焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39513327/