In this plunk I have an Angular UI Modal with a title bar. The objective is to drag the entire modal by dragging the title bar. Both the title bar and the modal share the (top,left) position, as the modal is a rectangle (I changed the radius to zero), but when I drag the title bar it doesn't work. Any ideas?
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);
};
});
$('.modal-content').draggable({
drag: function( event, ui ) {
if(event.toElement.className.indexOf("topbar") == -1 ) return false;
}
});
Try with above code instead of making 'topbar' draggable make the 'modal' draggable only when it dragged by clicking the 'topbar'.