AngularUI modal to be draggable and resizable

Question

I have an angularUi modal window wrapped in a directive:

html:

Answer 1

If you don't want to modify built-in templates you can write a directive that targets modalWindow:

.directive('modalWindow', function(){
    return {
      restrict: 'EA',
      link: function(scope, element) {
        element.draggable();
      }
    }  
  });

Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts.

NOTE: Also keep in mind that newer versions of Angular UI bootstrap have been prefixed with "uib" so "modalWindow" becomes "uibModalWindow" with thanks to @valepu

Answer 2

I combined the two above answers and made my modal dragable.

.directive('modalWindow', function(){
  return {
    restrict: 'EA',
    link: function(scope, element) {
      $(".modal-dialog").draggable();
    }
  }  
});

Answer 3

I've created a native directive to make the modal draggable. You only need AngularJs and jQuery. The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header.

.directive('modalDialog', function(){
  return {
    restrict: 'AC',
    link: function($scope, element) {
        var draggableStr = "draggableModal";
        var header = $(".modal-header", element);

        header.on('mousedown', (mouseDownEvent) => {
          var modalDialog = element;
          var offset = header.offset();

          modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
                $("." + draggableStr, modalDialog.parents()).offset({
                    top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
                    left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
                });
            }).on('mouseup', () => {
                 modalDialog.removeClass(draggableStr);
            });
        });    
     }
  }  
});

Answer 4

Try using

$(elem).closest('div.modal-dialog').draggable();

in link function

Answer 5

an Angular UI modal with a draggable title bar

NOTE: have to load both jQuery and jQuery UI before AngularJS scripts.

angular.module('xxApp')
    .directive('uibModalWindow', function () {
        return {
            restrict: 'EA',
            link: function (scope, element) {
                $('.modal-content').draggable({handle: ".modal-header"});
            }
        }
    });

Answer 6

Thank you for your examples. I little bit polished your code and this is my final result. to my solution it works perfectly :-)

HTML:

<div class="draggableModal ui-widget-content">

   <div class="modal-header">
     ...    
   </div>
</div>

angular.module('posProductsManager').directive('modalDialog', function () {
    var definition = {
        restrict: 'AC',
        link: function ($scope, element) {
            var draggableStr = "draggableModal";
            var header = $(".modal-header", element);
            var modalDialog = element;

            var clickPosition = null;
            var clickOffset = null;

            header[0].addEventListener('mousedown', function (position) {

                clickPosition = position;
                clickOffset = position;

                window.addEventListener('mouseup', mouseUpEvent);
                window.addEventListener('mousemove', mouseMoveEvent);
            });

            function mouseUpEvent() {
                clickPosition = null;
                window.removeEventListener('mouseup', mouseUpEvent);
                window.removeEventListener('mousemove', mouseMoveEvent);
            }

            function mouseMoveEvent(position) {

                var offset = modalDialog.parents().offset();

                $("." + draggableStr, modalDialog.parents()).offset({
                    left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
                    top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
                });

                clickPosition = position;
            }


        }
    };

    return definition;
});