title: How to temporarily stop the scroll event while dragging the uibmodal in mozilla?
body: <p>Here is the directive that I am using 
  Thanks to the solution here - <a href="https://stackoverflow.com/questions/27942209/how-can-i-apply-a-draggable-directive-to-bootstrap-modal-using-angularjs">How can i apply a draggable directive to bootstrap modal using angularJS?</a></p>
  
  <p>Modal: </p>
  
  <pre><code>$uibModal.open({
                      templateUrl: 'app/views/signs.html',
                      controller: function ($scope, $uibModalInstance, urls){
                          $scope.urls = urls;
                          $scope.close = function(){
                              $uibModalInstance.dismiss('cancel');
                          };
                      },
                      windowClass: 'windowClassCSS',
                      backdrop: 'true',
                      resolve: {
                          urls: function () {
                              return home.getUs();
                          },
                          signGroup: function(){
                              return home.getG();
                          },
                      }
                  });
  
  
  
  
  
  angular.module('myapp').directive('draggable', function ($document) {
      "use strict";
      return function (scope, element) {
          var startX = 0,
              startY = 0,
              x = 0,
              y = 0;
          element= angular.element(document.getElementsByClassName("modal-dialog"));
  
          element.on('mousedown', function (event) {
              // Prevent default dragging of selected content
              event.preventDefault();
              startX = event.screenX - x;
              startY = event.screenY - y;
              $document.on('mousemove', mousemove);
              $document.on('mouseup', mouseup);
          });
  
          function mousemove(event) {
              y = event.screenY - startY;
              x = event.screenX - startX;
              element.css({
                  top: y + 'px',
                  left: x + 'px'
              });
          }
  
          function mouseup() {
              $document.unbind('mousemove', mousemove);
              $document.unbind('mouseup', mouseup);
          }
      };
  });
  </code></pre>
  
  <p>And this is my modal html - </p>
  
  <pre><code>  &lt;div id="signsModal" draggable="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;title&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-12 row no-select gallery"&gt;
          &lt;div ng-repeat="url in types"&gt;
              &lt;div class= "gallery-item col-md-3"&gt;
                  &lt;img class="galleryimg no-select" ng-src="{{url.img}}"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .modal-backdrop.in {
        display: none;
      }
  div.windowClassCSS .modal-content {
    overflow: auto;
    width: 100%;
    max-width: 100%;
    height : 15vh;
  }
  
  div.windowClassCSS .modal-dialog {
    overflow: scroll;
    position: relative;
    cursor: move;
    margin-right: 0px;
    width: max-content;
    background-color: grey;
  }
      div.windowClassCSS .modal-content {
        overflow: auto;
        width: max-content;
        max-width: 100%;
        height : 35vh;
      }
  
  div.windowClassCSS .gallery-item {
    height: 25vh;
    border: 1px transparent;
  }
  
  
  div.windowClassCSS .gallery-img-review-modal {
    height: 100%;
    width: 100%;
    display : block;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid red;
  }
  </code></pre>
  
  <p>This worked for me in the sense that I am able to drag the modal. </p>
  
  <p>I have this issue in mozilla though - 
  The modal has a scrollbar also and when I move the scrollbar up and down, the modal starts getting dragged instead of the scrollbar scrolling the modal up and down. The scrollbar works only when I click on the up and down arrow. </p>
  
  <p>How can I deactivate the modal drag movement on the scrollbar in the modal?</p>