Question

这是我正在使用的指令感谢此处的解决方案 - How can i apply a draggable directive to bootstrap modal using angularJS?

模态：

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

这是我的模态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;
}

这对我有用，因为我能够拖动模态。

我在mozilla有这个问题 - 模态也有一个滚动条，当我上下移动滚动条时，模态开始被拖动而不是滚动条上下滚动模态。滚动条仅在我单击向上和向下箭头时起作用。

如何在模态中停用滚动条上的模态拖动动作？

如何在mozilla中拖动uibmodal时暂时停止滚动事件？

0 个答案: