jquery - How to temporarily stop the scroll event while dragging the uibmodal in mozilla? -


here directive using solution here - how can apply draggable directive bootstrap modal using angularjs?

modal:

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

and modal html -

  <div id="signsmodal" draggable="true">     <div class="modal-header">         <h4 class="modal-title">title</h4>     </div>      <div class="col-md-12 row no-select gallery">         <div ng-repeat="url in types">             <div class= "gallery-item col-md-3">                 <img class="galleryimg no-select" ng-src="{{url.img}}">             </div>         </div>     </div> </div> 

css:

 .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; } 

this worked me in sense able drag modal.

i have issue in mozilla though - modal has scrollbar , when move scrollbar , down, modal starts getting dragged instead of scrollbar scrolling modal , down. scrollbar works when click on , down arrow.

how can deactivate modal drag movement on scrollbar in modal?


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -