ps0604 ps0604 - 1 year ago 151
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?


<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 class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>



var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal,$timeout) {

var modalInstance;
$ = function () {
modalInstance = ${
animation: false,
windowClass: 'the-modal',
templateUrl: 'myModalContent.html'

drag: function( event, ui ) {
$( ".modal-content" ).offset({
left: ui.position.left});




Answer Source
  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'.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download