Menu
In this plunk I have an Angular UI modal with a draggable title bar. When you drag the bar, the entire modal moves. Problem is that if I move the mouse relatively fast up and down, the cursor loses focus on the bar and the modal stops moving. Any ideas how to fix this? Any other method is also welcome.
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);
};
});
353
To solve the problem use draggable correctly. To drag a container by a specified element use handle.
Instead of:
$('.modal-content').draggable({
drag: function( event, ui ) {
if(event.toElement.className.indexOf("topbar") == -1 ) return false;
}
});
Use:
$('.modal-content').draggable({ handle: ".topbar" });
See updated Plunker
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
