ps0604 ps0604 - 2 months ago 26
AngularJS Question

Dragging Angular UI modal with title bar

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

};

});

Answer
$('.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'.