从底部拖动时调整Angular Material Bottom Sheet的大小

Question

我正在使用Angular Material Bottom Sheet，但我希望以这种方式，当用户从底部向上和向下拖动它时，它应该进行调整。

我使用了一个插件来调整底部页面的大小，但是底部页面在没有调整大小的情况下上下拖动，它的底部没有固定。

Here's the working code in plunkar.

resizer.js：

angular.module('mc.resizer', []).directive('resizer', function($document) {
  return function($scope, $element, $attrs) {
    $element.on('mousedown', function(event) {
      event.preventDefault();

      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      if ($attrs.resizer == 'vertical') {
        // Handle vertical resizer
        var x = event.pageX;

        if ($attrs.resizerMax && x > $attrs.resizerMax) {
          x = parseInt($attrs.resizerMax);
        }

        $element.css({
          left: x + 'px'
        });

        $($attrs.resizerLeft).css({
          width: x + 'px'
        });
        $($attrs.resizerRight).css({
          left: (x + parseInt($attrs.resizerWidth)) + 'px'
        });

      } else {
        // Handle horizontal resizer
        var y = window.innerHeight - event.pageY;
        if((window.innerHeight-100 > y)&&(y>100)){
          $element.css({
            bottom: y + 'px'
          });

          $($attrs.resizerTop).css({
            bottom: (y + parseInt($attrs.resizerHeight)) + 'px'
          });
          $($attrs.resizerBottom).css({
            height: y + 'px'
          });
        }
      }
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  };
});