Draggable Angular UI Modal loses focus

Question

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

    };

});

I ran up the Plunker and it behaves very strangely - like it loses the drag at some point. The code is so simple there can't be anything wrong. I'm stumped :( — Mikkel, Sep 27 '16 at 00:21

score 8 · Accepted Answer · answered Sep 20 '16 at 19:38

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

Draggable Angular UI Modal loses focus

1 Answers1